使用一个按钮清除react-admin编辑表单中的多个字段
使用一个按钮清除react-admin编辑表单中的多个字段
提问于 2020-04-08 01:38:33
我有一个使用react-admin的Edit表单，我正在尝试弄清楚如何添加一个按钮来在单击时清除一些字段。
相关的表单块：
const ProfileEdit = withDataProvider((
{...props}:{
record: ProfileRecord,
dataProvider:DataProvider,
dispatch:DispatchFunction
},
) => {
const {dataProvider, dispatch, ...rest} = props;
return (
<Edit {...rest}>
<TabbedForm >
<FormTab label='Profile'>
<TextInput source='message'/>
<DateTimeInput source='start'/>
<DateTimeInput source='expiry'/>
<FormDataConsumer>
{({ formData }) =>
<Button onClick={()=>{clearFields(formData)}}>Clear Fields</Button>
}
</FormDataConsumer>
</FormTab>
</TabbedForm>
</Edit>
);
});和clear函数：
const clearFields = (data) => {
data.message = null;
data.start = null;
data.expiry = null;
return null;
};不幸的是，这并没有完成任何事情。
这是为了更好地设置我的onClick，还是我做错了？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-08 14:00:55
React-admin使用它来处理表单: react-final-form / final-form：https://final-form.org/docs/final-form/types/FormApi#change
import React, {useCallback} from 'react'
import {useForm} from 'react-final-form';
const ClearFieldsButton = ({ variant, ...props}) => {
const form = useForm();
const handleClick = useCallback(() => {
form.change('message', undefined);
form.change('start', undefined);
form.change('expiry', undefined);
}, [form]);
return (
<Button onClick={handleClick} {...props} />
);
};
Usage:
...
<FormTab label='Profile'>
<TextInput source='message'/>
<DateTimeInput source='start'/>
<DateTimeInput source='expiry'/>
<ClearFieldsButton label="Clear Fields" />
</FormTabStack Overflow用户
发布于 2020-04-08 02:21:33
对于onClick处理程序，为了能够传递参数，您必须将事件对象与一起传递。试试这个：
对于按钮：
<Button onClick={(e)=> clearFields(e, formData)}>Clear Fields</Button> 对于函数：
const clearFields = (e, data) => {
data.message = null;
data.start = null;
data.expiry = null;
return null;
};**注意:当您执行data.message = null等操作时，您正在修改本地参数值，我可以看到您返回的总是null!！你确定这是逻辑吗？！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61086052
复制相关文章
相似问题
腾讯云开发者
