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

Question

I've got an Edit form using react-admin, and I'm trying to figure out how to add a button to clear some of the fields on click.

The relevant chunk of form:

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

And the clear function:

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

    return null;
};

Unfortunately, this isn't accomplishing anything.

Is this a matter of setting up my onClick better, or am I going about this all wrong?

score 2 · Accepted Answer · answered Apr 08 '20 at 06:00

2

React-admin uses it to work with forms: 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

answered Apr 08 '20 at 06:00

MaxAlex

2,919
1
14
14

That did the trick! My IDE complained about the `variant` parameter, which doesn't seem to be supplied, but removing it worked fine. `undefined` also seems to set the dates to now, as opposed to leaving them empty (but that's also easily rectified) and the label isn't showing (adding addLabel to the button or just adding text within the button both get the job done though) – StephenTG Apr 08 '20 at 12:13
You can reset the entire form to its initial state using: form.setConfig('keepDirtyOnReinitialize', false); form.reset(); form.setConfig('keepDirtyOnReinitialize', true); – MaxAlex Apr 08 '20 at 13:51

score 0 · Answer 2 · answered Apr 07 '20 at 18:21

0

For onClick handler, and to be able to pass params, you have to pass event object along with. Try this:

For the button:

<Button onClick={(e)=> clearFields(e, formData)}>Clear Fields</Button>

For the function:

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

    return null;
};

** NOTE: When you doing data.message = null and so on, you're modifying the local parameter value, and i can see you returning always null!! are you sure about this logic ? !

answered Apr 07 '20 at 18:21

Tarreq

1,282
9
17

This does not seem to change the result. Clicking the button still does not clear the fields. – StephenTG Apr 07 '20 at 18:23
Would you mind elaborating on the note? Is there some return value that needs to be used that would make this work in place of null? – StephenTG Apr 07 '20 at 18:27
You need to clear form fields, so you have to clear the values which is connected to form values (like local state or redux store), but you're just passing a "data" object, change it locally and not touching anything in state or store! – Tarreq Apr 07 '20 at 18:54
Given that my entire approach is wrong, what's the purpose of adding the event? If that isn't the solution, it isn't helpful to present it as one. An answer more along the lines of your second comment would be more helpful in that it identifies the problem – StephenTG Apr 07 '20 at 18:58
It is not helping because you're not showing your code, show your complete code that illustrates this component, and then will be more easier to help. – Tarreq Apr 07 '20 at 19:00
I've included more form. – StephenTG Apr 07 '20 at 19:17

score 0 · Answer 3 · answered May 30 '23 at 09:28

React-admin v4 leverages react-hook-form.

import {useFormContext} from "react-hook-form";

const ClearFieldsButton = () => {
   const { setValue } = useFormContext();

   const handleClick = () => {
      setValue('message', '');
   };
   return <button onClick={handleClick}>Clear fields</button>
}

More info can be found here: https://marmelab.com/react-admin/Upgrade.html#common-patterns-to-access-form-state-and-values-have-changed

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

3 Answers3