如何更改React中另一個對象的狀態

Question

美好的一天。你能告訴我如何從另一個對象訪問對象點擊動作時某些對象的變化狀態。

我有元素計算器，它有一組按鈕和一個指示器。我想在點擊某個按鈕時更改指示器的狀態。例如增加指標值，如果點擊任何按鈕;

<style> 
#calculator table { 
    padding: 5px;; 
    border: ridge 3px; 
} 

#calculator table tr td { 
    text-align: center; 
} 

.nav-button, .nav-button button { 
    width: 100%; 
} 

.calc-indicator { 
    margin-bottom: 10px; 
    margin-top: 5px; 
    width: 100%; 
} 

.calc-indicator input { 
    border: solid 1px; 
    border-radius: 5px; 
    width: 93%; 
    padding: 4px; 
    text-align: right; 
} 
</style> 


var Indicator = React.createClass({ 

    getInitialState: function() { 
     return { 
      value: 0 
     } 
    }, 

    render: function() { 
     return (
       <div className="calc-indicator"> 
        <input type="text" value={this.state.value}/> 
       </div>); 
    } 
}); 

var Button = React.createClass({ 

    buttonClicked: function() { 
     // here I wanna update Indicators state and render Indicator 
    }, 

    render: function() { 
     return (
       <div className="nav-button" id={this.props.digit} 
        onClick={this.buttonClicked.bind(this, "nav-button")}> 
        <button>{this.props.digit}</button> 
       </div> 
     ); 
    } 
}); 


var Calculator = React.createClass({ 

    render: function() { 
     return (
       <div id="calculator"> 
        <table> 
         <tr> 
          <td colSpan="4"> 
           <Indicator /> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <Button digit="MC"/> 
          </td> 
          <td> 
           <Button digit="MR"/> 
          </td> 
          <td> 
           <Button digit="M+"/> 
          </td> 
          <td> 
           <Button digit="M"/> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <Button digit="BS"/> 
          </td> 
          <td> 
           <Button digit="CL"/> 
          </td> 
          <td> 
           <Button digit="C"/> 
          </td> 
          <td> 
           <Button digit="/"/> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <Button digit="7"/> 
          </td> 
          <td> 
           <Button digit="8"/> 
          </td> 
          <td> 
           <Button digit="9"/> 
          </td> 
          <td> 
           <Button digit="*"/> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <Button digit="4"/> 
          </td> 
          <td> 
           <Button digit="5"/> 
          </td> 
          <td> 
           <Button digit="6"/> 
          </td> 
          <td> 
           <Button digit="-"/> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <Button digit="1"/> 
          </td> 
          <td> 
           <Button digit="2"/> 
          </td> 
          <td> 
           <Button digit="3"/> 
          </td> 
          <td> 
           <Button digit="+"/> 
          </td> 
         </tr> 
         <tr> 
          <td colSpan="2"> 
           <Button digit="0"/> 
          </td> 
          <td> 
           <Button digit="."/> 
          </td> 
          <td> 
           <Button digit="="/> 
          </td> 
         </tr> 
        </table> 
       </div> 
     ); 
    } 
}); 
React.render(<Calculator />, document.body); 

如果您知道如何更好地編寫代碼，請發佈您的變體。 謝謝你的時間。

Answer 1

將狀態從指標移至計算器。在Button類中觸發位於計算器中的this.props.add。所以你有一個父母（計算器）和2個孩子（按鈕，指標）。

發送狀態下給孩子

<Button add={this.add} /> and <Indicator value={this.state.value} />