प्रतिक्रिया घटना पदानुक्रम मुद्दा

Question

क्या सबसे अच्छा तरीका है एक गहरी नोड जो भी एक माता पिता के नोड द्वारा नियंत्रित किया जा करने की जरूरत है में राज्य परिवर्तनों को संभाल है।

<Table> 
 
    <Row prop={user1}> 
 
    <Column prop={user1_col1} /> 
 
    <Column prop={user1_col2} /> 
 
    </Row> 
 
    <Row prop={user2}> 
 
    <Column prop={user2_col1} /> 
 
    <Column prop={user2_col2} /> 
 
    </Row> 
 
    <TableFooter> 
 
    <FooterColumn prop={sum1} /> 
 
    <FooterColumn prop={sum2} /> 
 
    </TableFooter> 
 
</Table>

जब भी किसी स्तंभ संपत्ति में कुछ भी बदल रहा है मैं केवल कि स्तंभ घटक के भीतर इस मूल्य के राज्य बनाए रखने के लिए है: यहाँ मेरी स्थिति है। हालांकि, अब मुझे FooterColumn घटक में इन मानों का योग चाहिए। इस लक्ष्य को हासिल करने का सबसे अच्छा तरीका क्या है?

मैं राज्य परिवर्तन मैं कई स्थानों में राज्यों रखने के लिए और फिर इसे नीचे से गुजरना होगा पारित करने जा रहा हूँ, तो यह कठिन बहुत काम है। क्या EventEmitters का उपयोग करना सबसे अच्छा है या क्या मुझे कुछ याद आ रहा है?

Answer 1

तो, आप सभी की जरूरत बच्चों के साथ माता-पिता घटक में राज्य का ट्रैक रखने के लिए, और साझा राज्य अद्यतन समारोह है:

var Parent = React.createClass({ 
    getInitialState: function() { 
    return { 
     users: [ 
     {name: 'Matt', values: [1, 2]}, 
     {name: 'user517153', values: [4, 5]} 
     ] 
    }; 
    }, 
    updateValue: function(rowId, colId, newValue) { 
    var newUsersState = this.state; 
    newUsersState.users[rowId].values[colId] = newValue; 
    this.setState({users: newUsersState}); 
    }, 
    render: function() { 
    var rows = this.state.users.map(function(user, r) { 
     var cols = user.values.map(function(value, c) { 
     return (
      <Column key={c} prop={value} rowId={r} colId={c} onChange={this.updateValue}/> 
     ); 
     }); 

     return (
     <Row key={r} prop={user}> 
      {cols} 
     </Row> 
    ); 
    }); 

    // Yes, it could be more efficient if you did it all in one map/forEach - doing this in a second one for clarity 
    var footerCols = this.state.users.map(function(user) { 
     var sum = 0; 
     user.values.forEach(function(value) { sum+= value; }); 
     return (
     <FooterColumn prop={sum} /> 
    ); 
    }); 

    return (
     <Table> 
     {rows} 
     <TableFooter> 
      {footerCols} 
     </TableFooter> 
     </Table> 
    ); 
    } 
}); 

अपने Column कक्षा में, आप बस पंक्तियों के साथ कुछ चाहिए का:

var Column = React.createClass({ 
    onChange: function(event) { 
    var props = this.props; 

    var newValue = event.target.value; // Get the new value somehow - this is just an example 
    props.onChange(props.rowId, props.coldId, newValue); 
    }, 
    render: function() { 
    var props = this.props; 

    return (
     <td onChange={this.onChnage}>{props.prop}</td> 
    ); 
    } 
}); 

आशा है कि यह समझ में आता है।