前端项目实战肆佰肆拾玖react-admin和material ui-增加保存返回按钮

import { AssignmentReturn } from '@mui/icons-material';
import { Toolbar,Button } from '@mui/material';
import {   Create,  SaveButton,  SimpleForm, TextInput } from 'react-admin';
import { useNavigate } from "react-router-dom";
export const ColorAdd = (props: any) => {
    const navigate = useNavigate()
    const onSuccess = (data: any) => {
        navigate(-1)
    };
    const CreateToolbar = () => {
        const navigate=useNavigate()
        return (
            <Toolbar>
                <SaveButton />
                <Button variant="contained" sx={{ ml: '16px' }} onClick={() => navigate(-1)}><AssignmentReturn /> 返回</Button>
            </Toolbar>
        )
    }
    return (
        <Create mutationOptions={{ onSuccess }} 
        >
            <SimpleForm toolbar={<CreateToolbar />}>
                <TextInput variant='outlined' source="color_code" label="颜色编号" />
                <TextInput variant='outlined' source="name" label="颜色名称" />
                <TextInput variant='outlined' source="description" label="颜色描述" />
            </SimpleForm>
        </Create>
    )
}

运行结果

posted @ 2023-10-07 09:24  前端导师歌谣  阅读(13)  评论(0)    收藏  举报  来源