Используйте кнопку, чтобы очистить несколько полей в форме редактирования реакции-администратора

Question

У меня есть форма редактирования с использованиемact-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

React-admin использует его для работы с формами: response-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

Answer 2

Для обработчика 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 и т. Д. , вы изменяете значение локального параметра, и я вижу, что вы возвращаете всегда ноль! ты уверен в этом логи c? !