Question

我正在使用React Hooks，我正在尝试使用useRef触发onclick事件。


    const component1: React.FC<Props> = props {
      const node =useRef<HTMLDivElement>(null);

      const ClickListener = UseCallback((e:any)=>{
        if(node.current.contains(e.target))
         console.log("Event Contained");
        else console.log("Event not Contained");
      },[]);

      return (
        <div ref={node} onClick={ClickListener}>
         <FormControl>
           <InputLabel>{text}</InputLabel>
           <Select> {contents} </Select>
         </FormControl>
        </div>
      );
    };

我有这个由componentX和componentY调用的Component1。

打开componentY的选择菜单时，上面的代码无法识别componentX节点上的onclick事件。

仅在关闭ComponentY的选择菜单并再次单击ComponentX之后，当前可以识别该事件。关于为什么无法识别的任何建议。我正在使用Material UI的选择。

Answer 1

您应将依赖项列表中的public class JobOrder { [Key] [Column(Order=1)] public int Id { get; set; } [Key] [Column(Order=2)] public int JobOrderNo { get; set; } // other fields... // Foreign key public int ReadingId { get; set; } // Navigation property public Reading Reading { get; set; } } public class Reading { public int Id { get; set; } // other fields... [ForeignKey("JobOrder")] [Column(Order=1)] public int JobOrderId { get; set; } [ForeignKey("JobOrder")] [Column(Order=2)] public int JobOrderNo { get; set; } // Navigation property public JobOrder JobOrder { get; set; } }传递给useCallback方法。否则，在定义node时引用node的{{1}}不会被更新。

通过docs - useCallback。 useCallback避免了每次调用组件函数时都重新定义函数。因此，函数定义中的所有全局变量都必须在依赖关系数组中列出，以便一旦依赖关系发生变化，react就会重新定义函数。

null

Answer 2

使用回调引用。

引用API文档

请记住，当useRef的内容更改时，它不会通知您。更改.current属性不会导致重新渲染。如果你想在React将ref附加或分离到DOM节点时运行一些代码，您可能要改用callback ref。

修改

很抱歉将您引向错误的方向。我建议您使用回调ref对您的代码不正确。

您的回调正常运行，并且能够正确使用div引用。
打开其他组件中的Select时，您觉得回调不起作用的原因是Select使用鼠标捕获来检测弹出窗口之外的单击。
因此，当您的下拉列表处于打开状态时，单击其他组件div根本不会到达该div，Select将使用它。后续点击效果很好。
不仅是您的组件，而且dom中的任何其他元素都是这种情况。

请参阅：https://codesandbox.io/s/silly-star-k430x

React Hooks：UseRef无法从Material UI Select中识别事件

2 个答案: