React - Redux，用子組件的數據提交表單

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作爲我們的一個項目，它很棒，因爲它集成了窗體，反應和還原。我發現自己寫的代碼少得多，並且在遠程本地提交，提交子組件和其他整潔的東西驗證。

我的建議是去與Redux Form而不是重新發明輪。