将 v5 动态表单迁移到 v6.0.0-rc.4

Question

我知道如何在 v5 中创建动态表单，但现在在 v6 中我被难住了，因为 form 必须硬编码并传递到 HOC。

假设我有一个待办事项列表，我希望每个项目都有自己的表单，只有一个字段。在 v5 中，我会动态命名表单，但我不能在这里，因为 HOC 采用静态字符串并且我不能动态注入任何东西。

我会把它当作一个大表格，然后从 submittedData 中解析出我想要的单个项目吗？这是我使用 FieldArray 的地方吗？我必须初始化数据，为数组中的每个字段重新初始化整个表单似乎很奇怪。

Answer 1

不确定这是否是最佳解决方案，但我创建了一个在渲染函数中调用 reduxForm 的 HOC。现在我可以将 formOptions 作为道具传递。然后，我确保只渲染一次。此外，我认为这是初始化逻辑的好地方，所以我也把它放在那里。

export default ComposedComponent => {
  return class DynamicForm extends Component {
    componentWillMount() {
      const {dispatch, formOptions: {form}, content} = this.props;
      dispatch(initialize(form, {outcomeCard: content}));
    }

    shouldComponentUpdate() {
      return false;
    }

    render() {
      const {formOptions, ...otherProps} = this.props;
      const WrappedComponent = reduxForm(formOptions)(ComposedComponent);
      return <WrappedComponent {...otherProps}/>;
    }
  }
};

希望看到其他想法！

Answer 2

不，form 可以在 v6 中作为道具传递给。

handleSubmit(row) {
  return values => {
    // do something with values for this row
  }
}

render() {
  return (
    <div>
      {this.props.myData.map(row =>
        <RowForm 
          key={row.id} 
          form={`rowForm_${row.id}`} // unique form for each row
          initialValues={row}
          onSubmit={this.handleSubmit(row)}/>
      )}
    </div>
  )
}

实际上，上述模式适用于 v5 和 v6。

将 v5 动态表单迁移到 v6.0.0-rc.4

Migrate v5 dynamic forms to v6.0.0-rc.4

redux-form