Javascript 当组件中有多个输入时，如何关注ReactJS中的输入字段？

我正在开发一个ReactJS应用程序。我有一个生成HTML表的组件。使用映射子组件为表生成行。每行包含一定数量的输入字段

编辑输入字段时，在某些情况下会在父组件中触发模式窗口。模式为用户提供了三个按钮供选择。单击模式中的某个特定按钮时，我希望焦点返回到用户正在编辑的输入字段

有谁能给我一些关于如何做到这一点的建议吗

我研究了使用refs，但我看到的所有示例都用一个只有一个输入的组件演示了它。因为模态是从父组件触发的，所以我很难理解如何使用/从子组件获取ref

谢谢你的帮助

我希望焦点返回到用户正在编辑的输入字段

您有多个输入字段，并且希望关注某个输入。要做到这一点，您需要多个参考文献——在您的案例中需要12个参考文献——

如下定义您的ref：

const inputRef = useRef([]);

inputRef.current[i].focus()

<input ref={el => this.myRefs[i] = el} />

您需要将输入节点分配给ref数组。如果您使用某种循环来生成输入字段，可以这样做：

<input ref={el => inputRef.current[i] = el} />

this.myRefs[i].focus()

---

如果您使用的是类组件：

在构造函数中定义一个数组：

this.myRefs = []

按如下方式分配HTML节点：

const inputRef = useRef([]);

inputRef.current[i].focus()

<input ref={el => this.myRefs[i] = el} />

---

使用@user9408899的答案作为指导并进行阅读，我提出了以下解决方案（仅显示与解决方案直接相关的部分代码）

父组件

• 实现了一个

  inputreftocus

  属性来存储我们需要的ref 希望将焦点添加到
• 实现了

  setInputRefToFocus（ref）

  以在状态中分配上述属性，并将该属性和

  inputRefToFocus

  传递给子组件

---

我觉得代码可以显著改进，因为这是我的第一次尝试

查找参考。。。！我正在使用类组件支持我的答案@MrBThanks，如何将ref传递给父组件？我正在从父组件触发一个模态窗口。