是否可以将焦点应用于我的 React 组件之一内的输入元素，而无需直接将 ref 分配给输入标签？

Posted 2023-03-05

【中文标题】是否可以将焦点应用于我的 React 组件之一内的输入元素，而无需直接将 ref 分配给输入标签？

【英文标题】：Is it possible to apply focus to an input element inside one of my React components without assigning a ref to the input tag directly?

【发布时间】：2018-05-19 12:41:48

【问题描述】：

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

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

如果有任何方法可以在不修改我的组件的情况下将 ref 应用于内部 <input> 元素，或者我是否可以在组件重新渲染后使用不同的策略重新应用焦点，请告诉我。

如果我不清楚或者您需要更多信息，请告诉我。非常感谢您的宝贵时间。

【问题讨论】：

如何将自动对焦设置为您的元素，例如 ?

您在reactjs.org/docs/refs-and-the-dom.html 阅读了整个部分吗？也许inputRef 案例可以适用于您的案例。

【参考方案1】：

如果我理解正确，当input 元素被重新渲染时焦点会丢失（因为它的祖先被重新渲染）。 如果是这种情况，那么您可以执行以下操作：

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

有时这会在短暂的延迟下效果更好：

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