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

Question

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

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

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

我已经尝试了所有我能在文档中找到的关于聚焦元素的方法，none 对我有用：

大多数文章都讲了如何在首次安装组件时聚焦控件，但我想在调用 setState 之后执行此操作。
其他文章谈到了如何使用引用来做到这一点，特别是 createRef 和 Ref callbacks。我都试过了，但似乎都不起作用，我怀疑这是因为那些是没有调用 setState 的用例，所以组件没有重新渲染——它只是一个按钮或动作，导致不同的元素集中在同一个“渲染”上“...
也有一些文章提到使用 autofocus，但这对我来说似乎没有任何作用。

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

Answer 1

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

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

如果您使用钩子：只需添加 useEffect hook 并添加 state 变量，之后设置，你想要关注，作为依赖

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

How to focus an element after re-render with ReactJS