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

Question

Redux 形式的“Field”组件提供了 onChange 属性。每当从基础输入触发 onChange 事件时将调用的回调。此回调允许获取字段的“newValue”和“previousValue”。

React-final-form “Field”组件没有这个属性。

那么，我怎样才能获得相同的功能呢？

原文由 Maksim Boltik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更改检测下的想法是订阅 Field 的值更改，并在值实际更改时调用您的自定义 onChange 处理程序。我准备了 简化的示例，您可以在其中看到它的实际效果。详细信息在 MyField.js 文件中。

因此，您可以像使用 redux-form 一样使用它：

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

2022 年 1 月更新

虽然上面的代码仍然有效（检查沙盒版本），但在某些情况下，解决方案需要 更多时间才能 解决。

这是 一个更新的沙箱，通过挂钩实现。它基于 useFieldValue 钩子和 OnChange 组件作为该钩子的使用者。但是当您需要重新渲染之间的先前值时，可以单独使用挂钩本身。此解决方案不依赖于字段的 meta.active 。

 // useFieldValue.js
import { useEffect, useRef } from "react";
import { useField } from "react-final-form";

const usePrevious = (val) => {
  const ref = useRef(val);

  useEffect(() => {
    ref.current = val;
  }, [val]);

  return ref.current;
};

const useFieldValue = (name) => {
  const {
    input: { value }
  } = useField(name, { subscription: { value: true } });
  const prevValue = usePrevious(value);

  return [value, prevValue];
};

export default useFieldValue;

// OnChange.js
import { useEffect } from "react";
import useFieldValue from "./useFieldValue";

export default ({ name, onChange }) => {
  const [value, prevValue] = useFieldValue(name);

  useEffect(() => {
    if (value !== prevValue) {
      onChange(value, prevValue);
    }
  }, [onChange, value, prevValue]);

  return null;
};

另一个不错的选择是这个答案： https ://stackoverflow.com/a/56495998/3647991

原文由 likerRr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Francesco Meli 发布，翻译遵循 CC BY-SA 4.0 许可协议