在 React 中重置组件的状态

Posted 2023-02-22

【中文标题】在 React 中重置组件的状态

【英文标题】：Resetting state on component in React

【发布时间】：2017-09-19 18:39:57

【问题描述】：

我在 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 函数上显示一个控制台日志，所以我知道它与它如何连接到子组件无关。我是否遗漏了一些关于如何在切换状态值后重置它的内容。感谢您的帮助！

【问题讨论】：

你需要把你的孩子包裹在一个<div></div>

您实际上是在调用render 中的函数。当然你的意思是传递函数引用onOpen=this.handleOpen

对不起，这两个都是错别字。它们已被修复，但问题仍然存在。有什么想法吗？

子组件中如何触发onOpen和onClose

【参考方案1】：

你必须这样做！

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