Как обратиться к элементу, на который повешено событие

Question

В случае с нативным js я могу получить элемент через this:

document.querySelector('div').addEventListener('click', function() {
  console.log(this);
});

<div>
  <p>text</p>
</div>

Но я работаю с react, код выглядит как-то так:

function App() {
  function eventFunction(ev) {
    console.log(this, ev.target); // undefined, <p>text</p>
  }

  return (
    <>
      <div onClick={eventFunction}>
        <p>text</p>
      </div>
    </>
  );
}

Как в таком случае обратиться к элементу, на который повесили событие или может есть более правильный способ вешать события в react?

Answer 1

как алтернатива

    export const App = () => {
  //хук для привязки контекста
  const myRef = useRef()
  

  function eventFunction(e) {
    console.log(e.currentTarget);
    console.log(myRef.current)
  }

  return (
      <div ref={myRef} onClick={eventFunction}>
        <p>text1</p>
      </div>
  );
}

плюс по идее все ивенты оборачиваются в реактовские так что обращение идет через virtual dom

БЛОГ НА HUSL

Как обратиться к элементу, на который повешено событие

Ответы (1 шт):