如何偵測 React 元件外部的點擊？

偵測 React 元件外部的點擊

所提出的場景涉及偵測特定元件外部發生的點擊事件。 jQuery 的closest() 方法通常會檢查點擊事件目標是否以元件的 DOM 元素作為父元素，表示元件內的點擊。

ES6 實作

提供的ES6 解決方案利用 useOutsideAlerter 鉤子，該鉤子將 ref 作為參數。在掛鉤內，按一下處理程序將新增至文件。當發生點擊時，將根據引用的當前元素檢查目標。如果組件中不包含目標，則會顯示警報。

OutsideAlerter 元件包裝子內容物並將掛鉤應用於其容器的 ref。在容器外部單擊時，會觸發警報。

基於類別的實作（React 16.3 之後）

在此實作中，OutsideAlerter 元件擴充了 Component 並定義了生命週期方法。 componentDidMount 和 componentWillUnmount 方法分別在文件中新增和刪除點選處理程序。 handleClickOutside 方法檢查元件外部的點擊，必要時顯示警報。

基於類別的實作（React 16.3 之前）

之前使用了稍微不同的方法反應 16.3。該元件有一個 setWrapperRef 方法，用於設定包裝器的參考。 handleClickOutside 方法檢查元件外部的點擊，必要時顯示警報。

無論實作如何，這些解決方案都允許偵測特定 React 元件外部的點擊事件，從而增強對使用者互動的控制。

以上是如何偵測 React 元件外部的點擊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！