Redux表单:REGISTER_FIELD/UNREGISTER_FIELD在更改或焦点事件后被调用

问题描述

我正在使用Redux Form在我的React应用程序中呈现和处理表单事件.使用了以下内容:

I’m using Redux Form to render and handle form events in my React app. The following things are used:

• 初始值
• 字段数组
• Immutable.js
• 材料界面

此外，字段数组是使用初始值构建的.

Also, the field arrays are build using the initial values.

export default connect(
  state => {
    return {
      buttonVisible,
      confirm,
      initialValues: Immutable.Map({
        configuration_items: configuration_items,
      })
    }
  }
)(AssetConfiguration)

问题在于表单中的 all 字段在每个 change或focus事件上被注销并注册.如果没有defaultValues，它似乎可以正常工作.

The problem is that all the fields in the form get deregistered and registered on every change or focus event. Without the defaultValues, it seems to work fine though.

我正在使用React组件来渲染表单，就像这样

I’m using a React component to render the form, something like this

class ConfigurationForm extends React.Component {
  renderTableBody({ fields, meta: { touched, error } }) {
    return(
      <tbody>
        {fields.map((field, index) => {
          return(
            <tr key={index}>
              <td>
                <Field fieldIndex={index} name={`${field}.value`} id={`${field}.value`} component={this.renderItemField.bind(this)} />
              </td>
            </tr>
          )
        })}
      </tbody>
    )
  }

 render() {
    return (
      <form className="defaultForm" onSubmit={handleSubmit(postAssetConfiguration)}>
        <FieldArray name="configuration_items" component={this.renderTableBody.bind(this)} />
      </form>
    )
  }
}

这里可能是什么问题?

谢谢，仁

推荐答案

如果任何人仍然遇到问题，我对FieldArray也会遇到类似的问题，而我的解决方案是完全删除bind并将其放入自己的组件中，因此它不会重新渲染数组.它必须在呈现它的组件之外-

If anyone is still having issues, I had similar problem with FieldArray and my solution was to remove bind completely and put it in it's own component so that it doesn't re-render array. It has to be outside of the component that's rendering it -

const renderItemField = ({ input }) => {
  return (
    <div>
      <input {...input} />
    </div>
  );
};

const renderTableBody = ({ fields, meta: { touched, error } }) => {
  return(
    <tbody>
      {fields.map((field, index) => {
        return(
          <tr key={index}>
            <td>
              <Field fieldIndex={index} name={`${field}.value`} id={`${field}.value`} component={renderItemField} />
            </td>
          </tr>
        )
      })}
    </tbody>
  )
};

class ConfigurationForm extends React.Component {
  render() {
    return (
      <form className="defaultForm" onSubmit={handleSubmit(postAssetConfiguration)}>
        <FieldArray name="configuration_items" component={renderTableBody} />
      </form>
    )
  }
}

这篇关于Redux表单:REGISTER_FIELD/UNREGISTER_FIELD在更改或焦点事件后被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！