前端项目实战壹佰捌拾react-admin+material ui-react-admin之Edit之queryOptions

最新推荐文章于 2024-07-20 18:16:53 发布

前端歌谣

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量37

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/131932696

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进去前端巅峰人才交流群

import * as React from "react";
import {Button,Typography,Box} from '@mui/material';
import { Edit, ListButton, ShowButton, SimpleForm, TextInput,TopToolbar, DateInput, ReferenceManyField, Datagrid, TextField, DateField, EditButton, required } from 'react-admin';


export const ReditEdit = () => {
    const PostEditActions = () => (
        <TopToolbar>
            <ShowButton />
            {/* Add your custom actions */}
            <ListButton />
            <Button color="primary" >Custom Action</Button>
        </TopToolbar>
    );
    const Aside = () => (
        <Box sx={{ width: '200px', margin: '1em' }}>
            <Typography variant="h6">Instructions</Typography>
            <Typography variant="body2">
                Posts will only be published once an editor approves them
            </Typography>
        </Box>
    );
    return(
        <Edit queryOptions={{ meta: { geyao: 'bar' } }} mutationOptions={{ meta: { foo: 'bar' } }} mutationMode="optimistic" id={2} disableAuthentication component="div" aside={<Aside />} actions={<PostEditActions />}>
        <SimpleForm>
        <TextInput source="name" validate={[required()]} fullWidth />
            <TextInput source="sex" multiline={true} label="Short description" />
            <TextInput source="salary" multiline={true} label="Short description" />
        </SimpleForm>
    </Edit>
    )
    
}