Используя React, как я могу прикрепить событие click к классу или идентификатору? - PullRequest
Новая
       7

Используя React, как я могу прикрепить событие click к классу или идентификатору?

6 голосов
/ 07 октября 2019

У меня есть SVG с сотнями <circle> элементов, к которым я хотел бы прикрепить событие click. Используя 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. Я что-то пропустил? Есть ли лучший подход?

1 Ответ

2 голосов
/ 07 октября 2019

Не думаю, что в таких случаях вам следует беспокоиться о манипулировании ванильным 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 hook): 

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

В этой реализации каждый компонент Circle будет использовать тот же обработчик onClick, определенный в CircleContext.Provider.

Пример код .

...