Passage d'états entre composants

Question

J'essaie de faire quelques actions en fonction des états d'un autre composant. J'ai une boîte de sélection et je change l'état quand l'utilisateur change les options.

<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> 

Fonction

commentOption(e) { 

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

Ainsi, le changement d'état se fait avec succès. Maintenant, je veux passer cet état dans un autre composant. Comment puis-je le faire?

Fondamentalement, je suis en train de le faire, mais dans un autre composant

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

Dans ce cas, maintenir la valeur dans parent composants et transmettre cette valeur et une fonction de parent à Child1 (passer d'une fonction est nécessaire pour changez la valeur dans le composant parent), passez la valeur à Child2.

Vérifiez cet extrait de travail:

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'/>