How to access DOM element's attributes and value inside an event handler function in React?

Question

My render function is

<input type="text" id="search" data-id={form.id} value={form.name} placeholder= "Search..." name="id" onKeyUp={this.keyUpFn}"/>

and my keyUpFn function is

keyUpFn(e){
    var textInput = document.getElementById('search');
    value1 = textInput.getAttribute('data-id')
    value2 = e.getAttribute('data-id')
    console.log(value1 )
    console.log(value2 )
}

Both console value gives error as getAttribute is not defined. How can I solve this in React?

You can find the answer here - https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele — tarun luthra, May 22 '18 at 04:33

score 0 · Answer 1 · answered May 22 '18 at 04:40

0

You can get the data from the Event target object. This is how the code would look

keyUpFn(e){
    console.log(e.target.getAttribute('data-id'));
    console.log(e.target.value);
}

answered May 22 '18 at 04:40

GSSwain

5,787
2
19
24

score 0 · Answer 2 · answered May 22 '18 at 04:43

0

You can actually get the data requested from the event (e) in your function by accessing

event.currentTarget.dataset.paramater;

keyUpFn(e) {
  e.currentTarget.dataset.id
}

answered May 22 '18 at 04:43

Mirrorcell

384
2
10

score 0 · Answer 3 · answered May 25 '18 at 07:46

0

You can use getElementsByClassName (or id, name etc.), querySelectorAll, focus. First two returns an array of all valid elements.

answered May 25 '18 at 07:46

tarun luthra

41
3

How to access DOM element's attributes and value inside an event handler function in React?

3 Answers3