Question

我知道如何在v5中执行动态表单，但现在在v6中我很难过，因为form必须是硬编码的＆amp;进入了HOC。

说我有一个待办事项清单，我希望每个项目都是一个单独的字段。在v5中，我会动态命名表单，但我不能在这里，因为HOC采用静态字符串，我无法动态注入任何内容。

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

Answer 1

不，import scala.concurrent.ExecutionContext.Implicits.global import scala.concurrent.Promise import scala.util.{Success, Try} // create a promise which we will complete after sometime val promise = Promise[String](); // Now lets consider the future contained in this promise val future = promise.future; val byGet = if (!future.value.isEmpty) { val valTry = future.value.get valTry match { case Success(v) => v + " :: Added" case _ => "DEFAULT :: Added" } } else "DEFAULT :: Added" val byMap = future.map(s => s + " :: Added") // promise was completed now promise.complete(Try("PROMISE")) //Now lets print both values println(byGet) // DEFAULT :: Added println(byMap) // Success(PROMISE :: Added)也可以在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。

Answer 2

不确定它是否是最佳解决方案，但我创建了一个在渲染功能中调用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}/>;
    }
  }
};

很想看到其他想法！

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

2 个答案: