Question

当我打开一个组件时，我需要关闭所有其他组件。点击它们会呈现一个列表

class ParentComponent extends Component{ 
  constructor(props){
   super(props)
   this.state= {...}
 } 

   render(){
      return(
         <DropDown />
         <DropDown />
         <DropDown />
        )
   }
}

每个DropDown组件都有自己的状态来管理点击事件的打开/关闭。除了单击之外，我怎样才能确保所有组件都关闭？

Answer 1

最终，您需要跟踪ParentComponent状态中哪个Dropdown组件处于“活动状态”。我可以考虑一些方法来切换每个Dropdown组件的活动状态，但高级解释是将一个函数从父组件作为prop传递到下拉组件，该组件将调用父组件上的this.setState在用户打开/关闭下拉列表时说明。然后，您可以在Dropdown组件上定义另一个“停用”它的道具。最后，在父组件中，有条件地将“deactivate”标志应用于要根据状态关闭的Dropdown组件。

切换反应组件

1 个答案: