前端项目实战肆佰叁拾伍react-admin和material ui-重置按钮

 
 
import { SimpleForm, TextInput, Edit, UpdateParams, useDataProvider, useResourceContext, Toolbar, SaveButton } from 'react-admin';
import { useNavigate } from "react-router-dom";
import { Button } from '@mui/material';
import { AssignmentReturn } from '@mui/icons-material';
const CreateToolbar = () => {
    const navigate=useNavigate()
    return (
        <Toolbar>
            <SaveButton />
            <Button variant="contained" sx={{ ml: '16px' }} onClick={() => navigate(-1)}><AssignmentReturn /> 返回</Button>
        </Toolbar>
    )
}
export const MaterialTypeEdit = (props: any) => {
    const navigate = useNavigate()
    const dataprovider = useDataProvider();
    const resource = useResourceContext();
    const onSuccess = (data: any) => {
        const { id, ...res } = data;
        const params: UpdateParams = { id: id, data: res } as UpdateParams;
        dataprovider.update(resource, params);
        navigate(-1)
    };
    return (
        <Edit mutationOptions={{ onSuccess }}
        >
            <SimpleForm toolbar={<CreateToolbar />}>
                <TextInput source="id" />
                <TextInput source="code" variant='outlined' label="物料类型编号"/>
                <TextInput source="name" variant='outlined' label="物料类型名称" />
                <TextInput source="description" variant='outlined' label="物料类型描述" />
            </SimpleForm>
        </Edit>
    )
 
}

运行结果