ReactJs суммирует данные от компонентов

Question

Каков наилучший способ разделить большой компонент на несколько меньших и объединить их данные? Я хотел бы получить доступ к состоянию компонента BillingDataComponent, NameComponent и AddressComponent в FormComponent.

Пример:

var FormComponent = React.createClass({ 
    _onClick: function() { 
    // Access child data here 
    var name = ??? 
    var address = ??? 
    var billingData = ??? 

    ActionCreator.updateFormDataOnServer(formDataAggregatedFromChildren); 
    }, 

    render: function() { 
    return (
     <div> 
     <form> 
      <NameComponent name="Maybe the name is already set?" /> 
      <AddressComponent /> 
      <BillingDataComponent /> 
      <button onClick={this._onClick} >Submit</button> 
     </form> 
     <div> 
    ); 
    } 
}); 

var NameComponent = React.createClass({ 
    _onChange: function(e) { 
    this.setState({ 
     value: e.target.value 
    }); 
    }, 

    render: function() { 
    return (
     <div> 
     <input type="text" value={this.state.value} onChange={this._onChange} /> 
     </div> 
    ); 
    } 
}); 

// AddressComponent and BillingDataComponent similiar 

Answer 1

Вы должны позволить FormComponent собственные данные и передать ее в качестве реквизита к другим компонентам. Когда данные должны измениться, дети должны распространить изменение до формы:

var FormComponent = React.createClass({ 
    getInitialState: function() { 
    return { 
     name: "" 
    }; 
    }, 

    _onClick: function() { 
    // Access child data here 
    var name = ??? 
    var address = ??? 
    var billingData = ??? 

    ActionCreator.updateFormDataOnServer(formDataAggregatedFromChildren); 
    }, 

    _onNameChange: function(name) { 
    this.setState({ 
     name: name 
    }); 
    }, 

    render: function() { 
    return (
     <div> 
     <form> 
      <NameComponent onChange={this._onNameChange} value={this.state.name} /> 
      <AddressComponent /> 
      <BillingDataComponent /> 
      <button onClick={this._onClick} >Submit</button> 
     </form> 
     <div> 
    ); 
    } 
}); 

var NameComponent = React.createClass({ 
    _onChange: function(e) { 
    this.props.onChange(e.target.value); 
    }, 

    render: function() { 
    return (
     <div> 
     <input type="text" value={this.props.value} onChange={this._onChange} /> 
     </div> 
    ); 
    } 
}); 

// AddressComponent and BillingDataComponent similiar