javascript - 如何在 React 中设置自动对焦？

Question

我正在尝试将焦点设置在我的 React 页面上，但它不起作用，因为我认为组件更新会覆盖componentDidUpdate.

还有另一种方法吗？

这是我通常用来关注的代码

document.querySelector("#input-box").focus();

标签： javascriptreactjsautofocus

Answer 1

如果您正在使用 react，那么理想情况下，您应该使用 refs 并使用它们来设置焦点。检查接受的答案Set focus on input after render

如果您遇到组件失去焦点的问题，如果您为组件设置的键值不是唯一的，则可能会发生这种情况。React 使用您设置的键值来跨渲染周期跟踪组件。如果密钥生成不正确，那么您可能会遇到组件在渲染周期中失去焦点的情况。例如，当用户在其中输入时的受控输入框。