前端项目实战肆佰叁拾伍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>
)
}
运行结果


浙公网安备 33010602011771号