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

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

Posted by: admin August 19, 2018 Leave a comment

Questions:

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?

Answers: