使用 ReactJS 重新渲染后如何聚焦元素

Question

在我的网络应用程序中，用户可以通过按 enter 来保存当前记录。 然后会显示一条消息，显示“记录已成功保存”。

由于其中一个输入框中闪烁的光标会影响“记录现在已保存”的印象，因此我希望应用程序在此时聚焦特定控件，例如“返回”按钮。

如何让 React 在重新渲染期间将焦点设置到元素上？如果我使用 someCreatedRef.current.focus() 命令，它应该在 setState 命令之前还是之后？

我已经尝试了所有可以在有关聚焦元素的文档中找到的方法，但没有一个对我有用：

• 大多数文章都讨论了首次安装组件时如何聚焦控件，但我想在调用 setState 后执行此操作。
• 其他文章介绍了如何使用引用来实现，特别是 createRef 和 Ref callbacks。我两者都尝试过，但似乎都不起作用，我怀疑这是因为这些用例没有调用 setState，所以组件没有重新渲染——它只是一个按钮或动作，导致不同的元素专注于相同的“渲染“……
• 也有一些文章谈到使用 autofocus，但这对我来说似乎没有任何作用。

编辑：感谢 Ganesh Krishna，我可以破解它。 Here 是此解决方案的代码沙箱。

Answer 1

1. 如果我使用 someCreatedRef.current.focus() 命令，它应该在 setState 命令之前还是之后？

   没有这样的顺序。

2. 但我想在调用 setState 后执行此操作。

   如果您想在调用 setState 后执行某些更改，您可以执行以下操作。

如果您使用的是类组件： setState 方法提供了一个回调函数，可以在状态改变后执行。

this.setState({
    // set the state variable 
},() => {
    // add the code to focus on particular element.
});

如果您使用钩子： 只需添加useEffect钩子并添加设置后的状态变量，您要聚焦，作为依赖

useEffect(() => {
 // add the code to focus on particular element.
}, [stateVariable])