Javascript 如何使用React Admin在Show view的对话框中添加表单输入？ 总结

我想在记录显示视图上添加一个快速操作按钮，该视图将显示一个带有表单字段的对话框

提交表单时，我希望提供的数据能够发送一个更新操作，其中包含表单字段数据和一些选项

我知道如何创建操作按钮，该按钮将在数据提供程序上发送更新操作，但我一直在思考如何处理对话框上的表单

尝试（和失败） 因此，我首先创建一个按钮，显示一个对话框，上面有一个

TextInput

（来自

react admin

）：

const ValidateButton:FC=（{record}）=>{
const[open，setOpen]=useState（false）；
常量handleInit=（）=>{
setOpen（真）
}
常量handleCancel=（）=>{
setOpen（假）；
}
常量handleSubmit=（）=>{
setOpen（假）；
}
返回(
验证
);
}

这给了我以下错误：

Error: useField must be used inside of a <Form> component

然后我得到：

TypeError: can't access property "save", context is undefined
useSaveContext
node_modules/ra-core/esm/controller/details/SaveContext.js:23

  20 |  */
  21 | export var useSaveContext = function (props) {
  22 |     var context = useContext(SaveContext);
> 23 |     if (!context.save || !context.setOnFailure) {
  24 |         /**
  25 |          * The element isn't inside a <SaveContextProvider>
  26 |          * To avoid breakage in that case, fallback to props

问题: 我想最后一个错误是因为需要将

SimpleForm

置于

或类似位置

我的目标是在对话框中输入与编辑表单相同的功能性和UX/UI设计，并执行自定义操作

我错过了什么？我怎样才能做到这一点

---

注意：我试图直接使用

@material ui/core

的

TextField

组件。它可以工作，但我失去了所有对我有用的react admin功能，比如

ReferenceInput

我最终通过创建自定义的

DialogForm

组件找到了解决方案，将表单本身和操作按钮等常见逻辑结合起来：

从'react'导入{FC，MouseEventHandler}；
从“react admin”导入{Button}；
从“@material ui/core”导入{Dialog，DialogProps，DialogTitle，DialogContent，DialogActions}
从“react final Form”导入{Form}；
从“最终形式”导入{Config}；
导出接口对话框FormProps{
打开：DialogProps['open']，
加载？：布尔值；
onSubmit:Config['onSubmit']，
onCancel:MouseEventHandler，
标题？：字符串，
submitLabel？：字符串；
取消标签？：字符串；
}
导出常量对话框窗体：FC=({
打开
加载，
提交时，
一旦取消，
标题
取消标签，
次标签，
儿童
}) => {
返回(
(
{标题&&(
{title}
)}
{儿童}
)}
/>
)
};
导出默认为空；

您可以复制/粘贴上面的示例，使其开箱即用

下面是一个带有按钮的实现示例：

const ValidateButton:FC=（{record}）=>{
const[open，setOpen]=useState（false）；
（未定义）；
const[mutate，{loading}]=useMutation（）；
const notify=useNotify（）；
const refresh=useRefresh（）；
常量handleInit=（）=>{
setOpen（真）
}
常量handleCancel=（）=>{
setOpen（假）；
}
常量handleSubmit:DialogFormProps['onSubmit']=（值）=>{
console.log（值）；
变异(
//你的变异逻辑。
);
}
返回(
一些文本。
);
}

希望它能有所帮助