Question

我正在构建一个仪表板，其中将包含一堆项目，如果用户通过单击图标进入“编辑模式”，则可以对其进行单独编辑。当用户处于此模式时，如果他们在当前正在编辑的项目之外单击，则应用程序应为他们提供一个弹出窗口，因此我开始尝试实现类似this的东西。但是我的问题是仪表板中的项目将通过数组和地图函数动态生成。因此，我想为每个项目动态分配引用。我只使用无状态功能组件和样式化组件。

我已经尝试将Refs for dynamically generated components in React?的解决方案与新的$user = User::where('email', $email)->where('password', Hash::make($password))->first();挂钩配合使用。但是，现在我对每个项目的实现useRef都是ref.current，而且我在控制台中遇到了undefined错误。

正在运行的演示：https://codesandbox.io/s/dynamic-useref-clf1z

编辑：实际上，它与“外部警报器”代码和框有所不同，因为“外部区域”将根据正在编辑的项目而改变，也就是说，它将是该项目之外的仪表板上的所有内容。

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

useRef挂钩是否可以动态显示“ onOutsideClick”？

1 个答案: