前端项目实战壹佰玖拾柒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> ) }
成功情况下的回调
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结