Как слушать onChange компонента поля в React-Final-Form?

Question

Redux-form Компонент "Field" предоставляет свойство onChange .Обратный вызов, который будет вызываться всякий раз, когда событие onChange запускается из базового входа.Этот обратный вызов позволяет получить «newValue» и «previousValue» для поля.

React-final-form Компонент «Field» не имеет этого свойства.

Итак, как я могу получить такую ​​же функциональность?

Answer 1

React-final-form обрабатывает эту функциональность с помощью крошечного внешнего пакета.

По сути, это дополнительный компонент, добавляемый внутрь формы, который привязывается к элементу по его имени:

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

Текущую документацию можно найти здесь:

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

Answer 2

Идея обнаружения изменений заключается в том, чтобы подписаться на изменения значения Field и вызывать свой собственный обработчик onChange, когда значение действительно изменяется.Я подготовил упрощенный пример , где вы можете увидеть его в действии.Подробности в MyField.js файле.

В результате вы можете использовать его так же, как с redux-form:

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

Answer 3

Я не использовал избыточную форму, но я добавил супер простую обертку вокруг компонента Field для прослушивания onChange, например:

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

Вам необходимо использовать компонент ExternalModificationDetector для прослушивания изменений в компоненте поля, например:

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

Оборачивая компонент ExternalModificationDetector с состоянием в компонент Field,мы можем прослушивать изменения значения поля и, зная, является ли поле активным, вывести, когда значение поля изменяется из-за внешних воздействий.

Через - React-Final-Form Github Docs

---

Вот пример песочницы , предоставленный в React-Final-Form Документы: https://codesandbox.io/s/3x989zl866