Question

当组件重新渲染时，我正在失去文本输入框的焦点。我可以通过添加引用（类似于答案here）将焦点重新应用于<input>元素，但如果我无法访问<input>，我该怎么办？ element因为它在自定义组件中。我显然可以编辑组件或完全放弃使用它，但我想知道是否有另一种方法可以将焦点重新应用于我的文本框。

我有一个名为<TextInput>的自定义组件。我可以为此组件添加引用，但最终会在此组件的外部<div>上，而不是在<input>元素中包含的<TextInput>标记上。

如果无论如何都要将ref应用于内部<input>元素而不修改我的组件，或者在我的组件重新渲染后我可以使用不同的策略重新应用焦点，请告诉我。

如果我不清楚或您是否需要其他信息，请告诉我。非常感谢你的时间。

Answer 1

如果我理解正确，重新渲染input元素时会失去焦点（因为它的祖先被重新渲染）。
如果是这样，那么你可以做类似的事情：

<input ref={ (el) => el.focus() } />

有时这会在短时间内更好地发挥作用：

<input ref={ (el) => setTimeout(() => el.focus(), 100) } />

是否可以将焦点应用于我的一个React组件中的输入元素，而无需直接为输入标记赋值？

1 个答案: