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（传递一个函数来更改父组件中的值），将值传递给{ {1}}。

检查此工作代码段：

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

在组件之间传递状态

1 个答案: