5

I'm using a custom component with react-final-form. On input change it sets the value to the address field. But when the input is cleared it doesn't update the value of the field. So I'm trying to do it with form mutators.

I have already added a mutator for clearing the field:

mutators={{
  clear: ([address], state, { changeValue }) => {
    changeValue(state, "address", () => undefined);
  }
}}

I tried to add it to my custom onChange function, but it doesn't work.

onChange={event =>
  props.input.onChange !== undefined
    ? props.input.onChange({ value: event })
    : form.mutators.clear
}

Or maybe this can be done without mutators at all? I would really appreciate your help. Here is a live example (clearing the field works only on the button click as onClick={form.mutators.clear}).

jupiteror
  • 1,085
  • 3
  • 24
  • 50

3 Answers3

6

You can just call form.change('address', undefined) at any time that you'd like to clear the value.

Erik R.
  • 7,152
  • 1
  • 29
  • 39
  • Thank you for your reply. I tried to add it to the Clear button here https://codesandbox.io/s/react-final-from-wreact-dadata-u0skz?fontsize=14, but the component doesn't work now (the field doesn't get any value onChange). Also my question is, how can I call this function (or `form.mutators.clear`) when the input is cleared, i. e. when the user deletes what he has typed. – jupiteror Sep 17 '19 at 14:22
  • when the field for clear its part of the object is there option ? i tried but empty all object – Eduardo Camargo Apr 25 '21 at 20:21
0

All the default callback are handle by the component. If you want to do a clear with a button click, you can create a custom component and use native callback methods do your thing.

onChange = (event) => {
  this.setState({
    address:event.target.value
  });
}

onClear = () => {
  this.setState({
    address:''
  });
}
<div>
  <Field name="address">
      <div>
        <input
          value={this.state.address}
          onChange={this.onChange}
        />
      </div>
  </Field>
  <button onClick={this.onClear}>Clear</button>
</div>
Sachin
  • 306
  • 1
  • 3
  • 8
  • Thank you for your reply. But I already have a button, which clears the input with `{form.mutators.clear}`. My question is, how can I clear the address field when a user deletes the value from the input. – jupiteror Sep 13 '19 at 17:54
  • You can see the example hear https://codesandbox.io/s/react-final-from-wreact-dadata-u0skz?fontsize=14 – jupiteror Sep 13 '19 at 17:56
0

The problem is not with the react-final-form in your code, it is due to the react-da data, I have played a lot around your code within 1 day, and checked reset is working with fine with the react-final-form

Just update your render with this code and see reset is working absolutely fine. Yeah! the problem is with react da data. I am not sure about what it does due to less official information for this package.

 <div className="App">
      <h2>Dadata test</h2>
      <Form
        mutators={{
          clear: ([address], state, { changeValue }) => {
            changeValue(state, "address", () => undefined);
          }
        }}
        onSubmit={onSubmit}
        render={({ form, handleSubmit, pristine, invalid, values, errors }) => (
          <form onSubmit={handleSubmit} noValidate>
            <Field name="address" component="input" />
              {/* {props => (
                <div>
                  <ReactDadata
                    token="d19c6d0b94e64b21d8168f9659f64f7b8c1acd1f"
                    onChange={event =>
                      props.input.onChange !== undefined
                        ? props.input.onChange({ value: event })
                        : form.mutators.clear
                    }
                  />
                </div>
              )}
            </Field> */}
            <button type="submit" disabled={invalid}>
              Submit
            </button>
            <button type="button" onClick={form.reset}>
              Clear
            </button>
            <Fields names={["address"]}>
              {fieldsState => (
                <pre>{JSON.stringify(fieldsState, undefined, 2)}</pre>
              )}
            </Fields>
          </form>
        )}
      />
    </div>

Hope it will help you to resolve the problem.

Shraddha Goel
  • 869
  • 7
  • 18
  • Hi, thank you for you reply. But I don't need to use `form.reset`. The address field will be only one of the fields in the form. So I need to find a way to clear the value for this only field when the input itself is cleared. You can type `Москва`, select one of the suggestions and then clear the input, to see how it works. – jupiteror Sep 19 '19 at 09:39
  • Basically, I need to integrate `form.mutators.clear` into my onChange function, or find another way to clear address value when the input is cleared. – jupiteror Sep 19 '19 at 09:40
  • Have you tried form.resetFieldState it will reset the value of a particular field. I think it perfect alternative to serving your purpose – Shraddha Goel Sep 19 '19 at 11:12
  • Could you please show an example here https://codesandbox.io/s/react-final-from-wreact-dadata-u0skz?fontsize=14? – jupiteror Sep 19 '19 at 11:48