How to I access DOM element using 'this' keyword in React

Question

In vanilla Javascript I can access 'this' keyword in event listeners like this:

  <body>
    <button type="button" onclick="test(this)">Click Me</button>
    <script>
      function test(t) {
        console.log(t); //this 
      }
    </script>
  </body>

or like this

  <body>
    <button id="test" type="button">Click Me</button>
    <script>
      document.getElementById("test").onclick = function () {
        console.log(this);
      };
    </script>
  </body>

But how do i access DOM element using 'this' keyword in react event listener

export default function Button() {
  function test() {
    console.log(this); //undefined
  }
  return (
    <button onClick={test} id="test" type="button">
      Click Me
    </button>
  );
}

I know I can access the target element using 'event' object. But I'm curious whether it is possible to use 'this' in react event listener

What do you expect `this` to be? What higher level problem are you trying to solve? Why can't you use the event target? — charlietfl, Aug 07 '21 at 17:51
Does this answer your question? [Get object data and target element from onClick event in react js](https://stackoverflow.com/questions/42576198/get-object-data-and-target-element-from-onclick-event-in-react-js) — kmoser, Aug 07 '21 at 17:53
@charlietfl this = element that is attached to the listener. I'm not trying to solve any higher level problem. Just curious. — Akthar, Aug 07 '21 at 17:55
Short answer then is no ... `this` will not be bound to the element — charlietfl, Aug 07 '21 at 17:55
@kmoser Thanks for the reply. No .This is used in that question because they are using class components instead of functional components — Akthar, Aug 07 '21 at 17:58
@charlietfl Thank again for the reply. So there isn't an equivalent for the vanilla code in react? — Akthar, Aug 07 '21 at 17:59
What are you wanting to do with this that you can't do with currentTarget in event object? — charlietfl, Aug 07 '21 at 18:02
@charlietfl As I already told you. I just wanted to know if there is any equivalent to that vanilla code in react. Nothing more. I'm sorry if I seem annoying — Akthar, Aug 07 '21 at 18:07
@charlietfl That's what I was looking for, a clear yes or no. Thanks you for taking your time to help me — Akthar, Aug 07 '21 at 18:09

Mohaimin · Answer 1 · 2021-08-07T17:56:42.400

1

Pass a parameter to get the event argument.

e.g:

function test(event) {
    console.log(event.target); // returns the element which trigered the event
    console.log(event.currentTarget); // returns the element that the event listener is attached to.
 }

But if you want to don't want to do it this way, you can use the querySelector method inside the event too.

   const element = document.querySelector("#test");

edited Aug 07 '21 at 17:56

answered Aug 07 '21 at 17:53

Mohaimin

664
4
10

Thanks for the reply. I already mentioned in the question that i know how to access target element using event object. I just want to know if it possible access dom element using 'this' keyword in react event listener – Akthar Aug 07 '21 at 17:55
Don't think there's a way, this doesn't bind to the same thing it does with jQuery – Mohaimin Aug 07 '21 at 17:57

score 0 · Answer 2 · answered Aug 07 '21 at 18:08

0

You can use ref to access DOM nodes in React.

import React, { useRef } from "react";

function Button() {
  const buttonRef = useRef(null);
  function test() {
    console.log(buttonRef.current); 
  }
  return (
    <button onClick={test} id="test" type="button" ref={buttonRef}>
      Click Me
    </button>
  );
}

Read more about ref here: https://reactjs.org/docs/hooks-reference.html#useref

answered Aug 07 '21 at 18:08

Hirak

86
2

Thanks for the reply. I was looking whether an equivalent to 'this' keyword in the vanilla code exists in react. Turns out it doesn't – Akthar Aug 07 '21 at 18:17

How to I access DOM element using 'this' keyword in React

2 Answers2