如何在 React-Final-Form 中监听 Field 组件的 onChange？

Question

Redux-form "Field" component provides onChange property . A callback that will be called whenever an onChange event is fired from the underlying input. This callback allows to get "newValue" and "previousValue" for the Field.

React-final-form "Field" component doesn't have this property.

So, how I can get the same functionality?

Answer 1

React-final-form handles this functionality with a tiny external package.

Basically it is an additional component to add inside the form that binds to the element using its name:

<Field name="foo" component="input" type="checkbox" />
<OnChange name="foo">
  {(value, previous) => {
    // do something
  }}
</OnChange>

The current documentation can be found here:

https://github.com/final-form/react-final-form-listeners#onchange

Answer 2

The idea under change detection is to subscribe to value changes of Field and call your custom onChange handler when value actually changes. I prepared simplified example where you can see it in action. Details are in MyField.js file.

As the result you can use it just as with redux-form :

 <MyField component="input" name="firstName" onChange={(val, prevVal) => console.log(val, prevVal)} />

Answer 3

I haven't used redux-form, but I added a super simple wrapper around the Field component to listen to onChange like this:

const Input = props => {

    const {
        name, 
        validate, 
        onChange,
        ...rest
    } = props;

    return (
        <Field name={name} validate={validate}>
            {({input, meta}) => {
                return (
                    <input 
                        {...input}
                        {...rest}
                        onChange={(e) => {
                            input.onChange(e); //final-form's onChange
                            if (onChange) { //props.onChange
                                onChange(e);
                            }
                        }}
                    />
            )}}
        </Field>
    );
};

Answer 4

One could use the Field's parse attribute and provide a function that does what you need with the value:

<Field
  parse={value => {
    // Do what you want with `value`
    return value;
  }}
  // ...
/>

Answer 5

You need to use the ExternalModificationDetector component to listen for changes on the field component like this:

    <ExternalModificationDetector name="abc">
      {externallyModified => (
        <BooleanDecay value={externallyModified} delay={1000}>
          {highlight => (
            <Field
                //field properties here
            />
          )}
        </BooleanDecay>
      )}
    </ExternalModificationDetector>

By wrapping a stateful ExternalModificationDetector component in a Field component, we can listen for changes to a field's value, and by knowing whether or not the field is active, deduce when a field's value changes due to external influences.

Via - React-Final-Form Github Docs

---

Here is a sandbox example provided in the React-Final-Form Docs: https://codesandbox.io/s/3x989zl866