时间戳

首页 > 解决方案 > 使用 React，如何将点击事件附加到类或 ID？

javascript - 使用 React，如何将点击事件附加到类或 ID？

问题描述

我有一个包含数百个<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。我错过了什么吗？有更好的方法吗？

标签： javascriptreactjsaddeventlistener

解决方案

我不认为在这种情况下你应该担心 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使用.onClickCircleContext.Provider

示例代码。

推荐阅读