reactjs - Clear a field's value on input clear in react-final-form

Question

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

Answer 1

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