Question

我在React JS中有一个简单的问题。我有两个不同的点击事件，它们切换组件的状态。第一个工作完美，但我不能得到第二个事件将组件重置回其原始状态。这是我的问题的精简版，所以只知道我无法将点击功能移动到子组件中。

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

就像我说的那样，handleOpen函数会切换状态，但handleClose不会将其切换回来。我可以在handleClose函数上显示控制台日志，因此我知道它与如何连接到子组件没有关系。我错过了关于如何在状态值切换后重置状态值的内容。谢谢你的帮助！

Answer 1

以下是你必须要做的事情！

＆＃13;

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

＆＃13;

在React中重置组件的状态

1 个答案: