前端项目实战壹佰玖拾柒react-admin+material ui-react-admin之onSubmit

import * as React from 'react';
import {Button,Typography,Box} from '@mui/material';
import { Create,useNotify,Toolbar,SaveButton, SimpleForm, TextInput, DateInput, required,TopToolbar} from 'react-admin';
import { useFormContext } from 'react-hook-form';
const PostCreateActions = () => (
<TopToolbar>
{/* Add your custom actions */}
<Button color="primary">geyao</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>
);
const MyWrapper=()=>{
return(
<div>我是歌谣</div>
)
}
export const SimpleFormCreate = () => {
const notify = useNotify();
const onSuccess = (data) => {
notify(`Changes saved`);
};
const transform = data => ({
...data,
name: `${data.name} ${data.sex}`
});
const postSave = (data) => {
create('posts', { data });
};
const PostCreateToolbar = () => {
const notify = useNotify();
const { reset } = useFormContext();
return (
<Toolbar>
<SaveButton
type="button"
label="post.action.save_and_add"
variant="text"
mutationOptions={{
onSuccess: () => {
reset();
window.scrollTo(0, 0);
notify('ra.notification.created', {
type: 'info',
messageArgs: { smart_count: 1 },
});
},
}}
/>
</Toolbar>
);
};
return(
<Create onSubmit={postSave}>
<SimpleForm component={MyWrapper}>
<TextInput source="name" validate={[required()]} fullWidth />
<TextInput source="sex" multiline={true} label="Short description" />
<TextInput source="salary" multiline={true} label="Short description" />
</SimpleForm>
</Create>
)
}

成功情况下的回调

posted @   前端导师歌谣  阅读(6)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
点击右上角即可分享
微信分享提示