使用 React，如何將點擊事件附加到 class 或 ID？

Question

我有一個帶有數百個<circle>元素的 SVG，我想將點擊事件附加到這些元素。 使用 jQuery，非常簡單：

$('circle').on('click', function(e) {
  alert('clicked');
});

我如何在 React 中做到這一點？

通常我會直接將事件偵聽器附加到元素：

<circle onClick={(e) => handleClick()} />

鑒於有數百個元素，這將是非常乏味的。 有沒有辦法可以將單個事件偵聽器附加到所有圓形元素？

我的工作解決方案使用 vanilla JS，但它涉及直接與 DOM 交互：

useEffect(() => {
  const circles = document.querySelectorAll('circle');
    for (const trigger of circles) {
      trigger.addEventListener('click', (e) => {
        alert('clicked');
    });
  }
}, []);

我沒有收到任何錯誤，這確實有效，但感覺不像 React。 我錯過了什么嗎？ 有更好的方法嗎？

Answer 1

我不認為在這種情況下你應該擔心 vanilla JS DOM 操作，但如果你想讓它反應式，你可以使用Context 。

首先定義你的上下文：

const CircleContext = React.createContext();

然后用CircleContext.Provider包裝您的應用程序（或將使用圓圈的應用程序的一部分）並將其值設置為所需的回調：

function App() {
  return (
    <CircleContext.Provider
      value={e => {
        console.log("Circle clicked!");
      }}
    >
      <div className="App">
        <Circle />
      </div>
    </CircleContext.Provider>
  );
}

並在您的圓形組件中使用該上下文（我使用useContext掛鈎）：

function Circle() {
  const context = useContext(CircleContext);
  return <button onClick={context}>My Button</button>;
}

通過此實現，每個Circle組件都將使用CircleContext.Provider中定義的相同onClick處理程序。

示例代碼。