コンポーネント間の状態の受け渡し

Question

他のコンポーネントの状態に基づいていくつかのアクションを実行しようとしています。選択ボックスがあり、ユーザーがオプションを変更すると状態が変更されます。

<div className="post_privacy_div float_left"> 

    <select className="review_privacy_select" onChange={this.commentOption}> 

     <option value="Comments with filter">Comments with filter</option> 

     <option value="Enable comments">Enable all comments</option> 

     <option value="Disable comments">Disable all comments</option> 

    </select> 
</div> 

機能

commentOption(e) { 

     this.setState({selectValue: e.target.value}); 
} 

ので、状態の変更が正常に行われます。今、私はこの状態を別のコンポーネントに渡したいと思っています。どうすればいいのですか？基本的には

私はこれをやろうとしているが、その場合には、別のコンポーネント

if (this.state.selectValue === 'Enable comments') { 

       this.setState({ 

        pendingcomment: !this.state.pendingcomment, 

       }) 

      } else if (this.state.selectValue === 'Disable comments') { 

       this.setState({ 

        pendingcomment: false, 
        allcomment: false, 

       }) 

      } else { 

       this.setState({ 

        pendingcomment: true, 
        allcomment: true, 

       }) 

      } 

Answer 1

にする必要がありparentコンポーネントに値を維持し、その値と機能を渡すChild1に親から関数を（合格しています親コンポーネントの値を変更する）、値をChild2に渡します。

チェックこの作業スニペット：

これら二つの成分が相互に接続する方法

class Parent extends React.Component { 
 
    constructor(){ 
 
     super(); 
 
     this.state = { value: null} 
 
     this.change = this.change.bind(this) 
 
    } 
 
    
 
    change(value){ 
 
     this.setState({value}) 
 
    } 
 
    
 
    render(){ 
 
     return(
 
      <div> 
 
      <Child1 value={this.state.value} change={this.change}/> 
 
      <Child2 value={this.state.value}/> 
 
      </div> 
 
     ) 
 
    }  
 
} 
 

 
class Child1 extends React.Component { 
 
    render(){ 
 
     return(
 
     <div> 
 
      In Child1: 
 
      <select value={this.props.value} onChange={(e) => this.props.change(e.target.value)}> 
 
       <option value='1'>1</option> 
 
       <option value='2'>2</option> 
 
       <option value='3'>3</option> 
 
      </select> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class Child2 extends React.Component { 
 
    render(){ 
 
     return(
 
     <div>In Child2: {this.props.value} </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Parent/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>