是否可以在React代码中唯一标识DOM元素？

Question

我正在使用React Dev Tools来检查Chrome中的React App。这是我看到的屏幕截图：

现在我想在我的React代码中标识突出显示的输入对象，以便修改当我键入某些输入时调用的事件。我的问题是DOM中有多个输入元素。我可以轻松地在输入字段之一中输入一些随机数，然后确定我在输入中修改了DOM中的哪个元素。但是我不知道如何在代码中标识该元素，因为代码中有多个相同类型的输入元素。这使得很难识别我在DOM中修改的代码中的特定行或特定元素。

有没有办法在代码中找到特定的DOM元素？还是修改我的代码，以便找出代码中哪个元素调用了事件处理程序？

我曾尝试在事件处理程序的控制台中记录this，但在我的情况下，{{1}}返回了对整个组件的引用，而不是对调用事件处理程序的特定元素的引用。

Answer 1

使用React Dev Tools

如React Dev Tools的主图像所示，您可以检查屏幕上的元素并查看代码的结构。这将是对您有用的工具。
如果您想确切地知道要更改的字段，只需在id='123'之类的字段中添加属性，即可在开发工具中看到它。
要了解如何安装和使用该Chrome插件，您可以进行一些搜索，即可找到它;）

编辑：我说过要添加诸如id='123'之类的prop字段，但是您可以添加诸如elementIWantToSee='here'之类的prop，并且借助开发工具，您可以轻松找到元素