reactjs - ใช้ปุ่มเพื่อล้างหลายฟิลด์ในฟอร์มแก้ไขของ react-admin

ฉันมีฟอร์มแก้ไขโดยใช้ 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 ของฉันให้ดีขึ้นหรือว่าฉันกำลังทำเรื่องนี้ผิดไปทั้งหมด?

คำตอบ #1

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

คำตอบ #2

สำหรับตัวจัดการ onClick และเพื่อที่จะสามารถส่งพารามิเตอร์ คุณต้องส่งวัตถุ event พร้อมด้วย ลองแบบนี้:

สำหรับปุ่ม:

<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 เสมอ !! คุณแน่ใจเกี่ยวกับตรรกะนี้หรือ !