在React中重置组件的状态

Question

I have a simple problem in React JS. I have two different click events, which switch the state of the component. The first one works perfectly, however I cannot get the second event to reset the component back to its original state. This is a stripped down version of my problem, so just know that I cannot move the click functions into the Child component.

class Parent extends Component{
  constructor(){
    this.state = {
      open: false
    }
    this.handleOpen = this.handleOpen.bind(this)
    this.handleClose = this.handleClose.bind(this)
  }
  handleOpen(){
    this.setState({open: true})
  }
  handleClose(){
    this.setState({open: false})
  }
  render(){
    return(
    <div>
      <Child onOpen={this.handleOpen} onClose={this.handleClose} />
      <Child onOpen={this.handleOpen} onClose={this.handleClose} />
      <Child onOpen={this.handleOpen} onClose={this.handleClose} />
      <Child onOpen={this.handleOpen} onClose={this.handleClose} />
    </div>
    )
  }
}

Like I said, the handleOpen function switches the state, but the handleClose does not switch it back. I can get a console log to show on the handleClose function, so I know that it does not have to do with how it is being hooked up to the Child Component. Am I missing something about how to reset a state value after it has already been switched. Thank you for your help!

Answer 1

Here is How you have to do it!

 class Child extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log(this.props.isOpen); if (this.props.isOpen) { this.props.onClose(); } else { this.props.onOpen(); } } render() { return <button onClick={this.handleClick}>Click ME</button>; } } class Parent extends React.Component{ constructor(props){ super(props); this.state = { open: false } this.handleOpen = this.handleOpen.bind(this) this.handleClose = this.handleClose.bind(this) } handleOpen(){ this.setState({open: true}) } handleClose(){ this.setState({open: false}) } render(){ return( <div> <p>{this.state.open.toString()}</p> <Child onOpen={this.handleOpen} onClose={this.handleClose} isOpen={this.state.open} /> <Child onOpen={this.handleOpen} onClose={this.handleClose} isOpen={this.state.open} /> <Child onOpen={this.handleOpen} onClose={this.handleClose} isOpen={this.state.open} /> <Child onOpen={this.handleOpen} onClose={this.handleClose} isOpen={this.state.open} /> </div> ) } } ReactDOM.render( <Parent/>, document.getElementById('container') );