动态 "onOutsideClick" 的 useRef 挂钩？

Question

我正在构建一个仪表板，其中包含一系列可以在用户通过单击图标输入 "Edit Mode" 时单独编辑的项目。当用户处于这种模式时，如果他们在当前正在编辑的项目之外单击，应用程序应该给他们一个弹出窗口，所以我开始尝试实现类似 this 的东西。但我这里的问题是仪表板中的项目将从数组和映射函数动态生成。所以我想为这些项目中的每一个动态分配参考。我只使用无状态功能组件和样式组件。

我尝试调整的解决方案以与新的 useRef 挂钩一起使用。但是，现在我的每个项目的实施 ref.current 是 undefined，而且我在控制台中收到 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 错误。

工作演示：https://codesandbox.io/s/dynamic-useref-clf1z

编辑：它实际上与外部警报器代码和框不同，因为 "outside area" 会根据正在编辑的项目而改变，即它将是仪表板上该项目之外的所有内容。

Answer 1

您就快完成了，您只需按照 docs:

中所述在您的子组件中使用 forwardRef

const Item = React.forwardRef((props, ref) => {
  return (
    <Container ref={ref} onClick={e => props.handleBoxClick(e, props.index)}>
      {props.itemId}
    </Container>
  );
});

export default Item;

Updated sandbox here

动态 "onOutsideClick" 的 useRef 挂钩？

useRef hook for dynamic "onOutsideClick"?

reactjs

styled-components

react-hooks