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

Question

Redux-form "Field"组件提供onChange属性.每当从基础输入触发onChange事件时将调用的回调.此回调允许为Field获取"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;
  }}
  // ...
/>