Reactjs 单击组件外部时，如何更改状态？

我有一个具有属性列表的父组件（图1），当我在其中单击时，我将de

detailsVisible

的状态从false更改为true，并显示子组件（图2）我希望在单击“详细信息”组件以外的任何位置时，详细信息组件会通过将

detailsVisible

从true切换为false而消失，我曾尝试向列表的每个元素添加onblur函数，并向主div添加函数，但没有任何效果

实现这一点的最简单方法是使用addEventListener（在componentDidMount中）、removeEventListener（在componentWillUnmount中）向正文添加默认的点击事件并检查该事件是否在渲染组件内部触发

您可以添加isDescendant帮助程序：

function isDescendant(parent, child) {
  let node = child.parentNode;
  while (node != null) {
    if (node == parent) {
      return true;
    }
    node = node.parentNode;
  }
  return false;
}

然后像这样使用它：

document.body.addEventListener('click', function(e) {
  const componentEl = document.getElementById('your-component-id');
  if ( isDescendant(componentEl, e.target) ) {
    //Change state
  }
});

---

RemoveEventListener在这里很重要，因为该事件是在外部添加的，您可以触发对未安装组件状态的更新。

请避免粘贴代码截图，而是添加一个表示场景的可生产示例。抱歉，我不是故意的，我正在使用两个屏幕，但没有意识到屏幕截图也有第二个屏幕，我不想显示使用

document.body.addEventListener（'click'，function（e）{const componentEl=document.getElementById（'your-component-id'）；if（isdescentant（componentEl，e.target））{//Change state});我在returnIn componentDidMount（）的内部和外部进行了尝试。