Можно ли однозначно идентифицировать элементы DOM в коде React?

Question

Я использую React Dev Tools для проверки приложения React в Chrome.Вот скриншот того, что я вижу:

Now Я хотел бы идентифицировать выделенный входной объект в моем коде React , чтобы изменитьсобытие, которое вызывается, когда я набираю какой-то ввод.Моя проблема в том, что в DOM есть несколько элементов ввода.Я могу легко ввести случайное число в одно из полей ввода, а затем определить, какой элемент в DOM я изменил своим вводом.Но я не знаю, как идентифицировать этот элемент в коде, поскольку в коде есть несколько элементов ввода одного типа.Это затрудняет идентификацию конкретной строки или конкретного элемента в коде, который я изменил в DOM.

Есть ли способ найти определенный элемент DOM в коде?Или изменить мой код так, чтобы я узнал, какой элемент в коде вызвал обработчик событий?

Я попытался записать this в консоли в обработчике событий, но this в моем случае возвращаетссылка на весь компонент, а не на конкретный элемент, вызвавший обработчик события.

Answer 1

Использование React Dev Tools

Как показывает основное изображение React Dev Tools , вы можете проверить элемент на экране и увидеть структуру кода,Это будет полезным инструментом для вас.
Если вы хотите точно знать, какое поле изменить, просто добавьте в него опору, например id='123', и вы сможете увидеть его в Dev Tools.
Чтобы узнать, как установить и использовать этот плагин Chrome, вы можете выполнить небольшой поиск и найти его;)

Редактировать: Я сказал добавить поле реквизита, например id='123', но вы можете добавить любой реквизит, например elementIWantToSee='here', и с помощью инструментов разработчика вы легко найдете элемент