Как получить доступ к атрибутам и значению элемента DOM внутри функции обработчика событий в React?

Question

Моя функция рендеринга -

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

, а моя функция keyUpFn -

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

Оба значения консоли выдают ошибку, поскольку getAttribute не определен.Как я могу решить это в React?

Answer 1

В действительности вы можете получить данные, запрошенные из события (e) в вашей функции, набрав

event.currentTarget.dataset.paramater;

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

Answer 2

Вы можете использовать getElementsByClassName (или id, имя и т. Д.), QuerySelectorAll, focus.Первые два возвращают массив всех допустимых элементов.

Answer 3

Вы можете получить данные из объекта Event target .Вот как будет выглядеть код

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