在组件之间传递状态

我试图根据另一个组件的状态做一些操作。我有一个选择框，当用户更改选项时，我正在更改状态。在组件之间传递状态

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

       }) 

      }

来源

2017-05-24 CraZyDroiD

这两个组件是如何相互连接的？ –

如果第二个组件放置在第一个组件中，则可以将它作为prop传递到第二个组件上（selectValue）。如果没有，您可以在您的应用程序中设置redux，以便在整个应用程序中保持一个给定的状态。 – collision

我将这2个组件渲染到这样的另一个组件上。我需要的状态是PostFooter。我想将它传递给TextPost – CraZyDroiD

在这种情况下保持在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'/>

来源

2017-05-24 10:14:50

谢谢你的方法是正确的 – CraZyDroiD

在组件之间传递状态

回答

相关问题