将 redux-form 迁移到 v6、onBlur 和 onChange 函数

Question

我正在将 redux-form 迁移到最新版本 6.0.0rc3。在此版本中，'fields' 数组消失了，取而代之的是 Field 组件（参见 http://redux-form.com/6.0.0-rc.3/docs/MigrationGuide.md/）。我曾经像这样扩展 v5 中的默认 onBlur 函数：

const { user_zipcode } = this.props.fields;
onChange={
  val => user_zipcode.onChange(this._handleZipcodeChange(val))
}

但是，在新版本中不能再这样做了，因为 this.props.fields 不存在。

根据我在文档中发现的内容，新方法应该是为每个具有不同功能的表单字段创建一个组件，并在那里扩展 onBlur 函数：

_onBlur() {
  // my custom blur-function
}

render() {
  const { input, touched, error } = this.props;
  return (
    <input
      className={styles.input}
      {...input}
      onBlur={() => {
        // 2 functions need to be called here
        this._onBlur();
        input.onBlur();
      }}
    />
  );
}

这很好，除了我需要为每个字段创建一个新元素，当模糊事件发生时需要做一些不同的事情。在某些字段中，我必须调用 API，这是通过分派操作来实现的。例如，我必须这样做才能获得地址。在这些组件中，我必须连接我的商店，所以它连接了很多次。

我尝试将我的自定义函数从父级传递到 Field 组件，如下所示：

<Field
  type="text"
  name="user_zipcode"
  component={Zipcode}
  onBlurFunction={this._myBlurFunction}
/>

并从道具中获取组件中的两个函数：

...
onBlur={() => {
  input.onBlurFunction();
  input.onBlur();
}}
...

由于新 React warning.

，这无法正常工作

有更好的方法吗？

Answer 1

在文档中是这样说的

道具：对象[可选]

具有自定义道具的对象通过 Field 组件传递到提供给组件道具的组件中。该道具将合并到 Field 本身提供的道具中。如果您使用的是 TypeScript，这可能很有用。这个结构是完全可选的；将 props 传递给组件的主要方式是将它们直接传递给 Field 组件，但是如果出于某种原因，您更愿意将它们捆绑到一个单独的对象中，则可以通过将它们传递给 props 来实现。

<Field component={renderField} props={{ disabled: true }} />

http://redux-form.com/6.0.0-rc.3/docs/api/Field.md/

也许试试那个。它可能会防止错误。或者在它被传递到输入之前拉出你的功能道具。

Answer 2

我最终为每个具有 onChange 或 onBlur 函数的表单字段创建了一个自定义组件。这样你就可以运行这两个函数，所以所有默认的 redux-form 动作都会被调用。

// Licenceplate-component

export default class Licenceplate extends Component {

    _handleBlur = ({ currentTarget: { value } }) => {
        // my blur function
    }

    render() {
        const {
          input,
          meta: { touched, error }
        } = this.props;

        return (
          <div className={styles.wrapper}>
            <input
              {...input}
              type="text"
              onBlur={
                e => input.onBlur(this._handleBlur(e))
              }
            />

         </div>
       );
   }
}


// In my form-component
<Field
    component={Licenceplate}
    name="car_licenceplate"
    type="text"
/>

将 redux-form 迁移到 v6、onBlur 和 onChange 函数

Migrating redux-form to v6, onBlur and onChange functions

reactjs

redux

redux-form