Question

我有一个组件，它是一个表单，有许多子组件。在提交表单时，合并所有子组件的数据的最佳方法是什么？以下是一个想法，这是正确的方法吗？我传递一个函数的引用，该函数将在组件发生更改时更新表单的属性。什么是最佳做法？感谢。

import React from 'react';
import { Component , PropTypes} from 'react';
import { connect } from 'react-redux';
import { saveData } from '../actions/index'
import {bindActionCreators} from 'redux';

export default class MyClass extends Component {
  constructor(props) {
    super (props);
    this.formData = {};
    this.setFormData = this.setFormData.bind(this);
    this.onSubmitHandler = this.onSubmitHandler.bind(this);
  }

  setFormData(key, value){
    this.formData[key] = value;
  }

  onSubmitHandler(evt){
    this.props.saveData(this.formData);
  }

  render (){
      return (
        <div>
          <form onSubmit = {this.onSubmitHandler} >
              <div >
                <NameComponent setFormData = {this.setFormData}/>
                <AddressComponent setFormData = {this.setFormData}/>
                //...lots more components
          </form>
        </div>
      );
    }
}

export default connect( mapStateToProps, {saveData)(MyClass)

Answer 1

是的，这种方法是正确的，因为通常希望孩子委托给负责他们的父母。事实上，这就是Redux Form的工作方式。 <Field />输入组件将其状态委托给高阶<Form />包装器。

你的方法的问题是你必须自己做很多重复的事情（例如调用onChange，委托值等）。

我们将Redux Form用于我们的一个项目，它很好，因为它集成了表单，react和redux。我发现自己编写的代码少得多，而且还有远程，本地提交，子组件提交和其他整洁的东西的验证。

我的建议是使用Redux Form而不是重新发明轮子。

React - Redux，提交包含子组件数据的表单

1 个答案: