如何在 React-Final-Form 中監聽 Field 組件的 onChange？

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

我沒有使用過 redux-form，但是我在 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

可以使用 Field 的parse屬性並提供一個函數來執行您需要的值：

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

Answer 5

您需要使用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