如何在React中设置自动对焦

Question

我试图将焦点放在我的React页面上，但是它不起作用，因为我认为组件更新会覆盖componentDidUpdate。

还有另一种方法吗？

这是我通常关注的代码

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

Answer 1

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

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