Question

Redux-form“字段”组件提供onChange property。每当从基础输入触发onChange事件时将调用的回调。此回调允许为字段获取“newValue”和“previousValue”。

React-final-form“字段”组件没有此属性。

那么，我如何才能获得相同的功能？

Answer 1

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

结果您可以像使用redux-form一样使用它：

＆＃13;

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

＆＃13;

Answer 2

我还没有使用过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 3

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

Answer 4

React-final-form通过一个很小的外部程序包即可处理此功能。

基本上，这是添加到使用其名称绑定到元素的表单内部的附加组件：

$('select').val('stateElementId')

当前文档可以在这里找到：

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

Answer 5

一个人可以使用字段的parse属性，并提供一个功能来实现您需要的值：

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

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

5 个答案: