使用按钮清除 react-admin 编辑表单中的多个字段

Question

我有一个使用 react-admin 的编辑表单，我正在尝试弄清楚如何添加一个按钮以在单击时清除某些字段。

相关的表格块：

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>
    );
});

以及清除函数：

const clearFields = (data) => {
    data.message = null;
    data.start = null;
    data.expiry = null;

    return null;
};

不幸的是，这没有完成任何事情。

这是更好地设置我的 onClick 的问题，还是我这样做全错了？

Answer 1

对于 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！！你确定这个逻辑吗？ !

Answer 2

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" />    
</FormTab

使用按钮清除 react-admin 编辑表单中的多个字段

Use a button to clear multiple fields in react-admin edit form

forms

typescript

reactjs

react-admin