Javascript 当其父组件在React中重新呈现时，子组件中的输入保持焦点的正确方法是什么？

我有一个组件

ChildComponent

，包含n个文本输入。父组件

ParentComponent

在

div

上有一个

onClick

侦听器，该侦听器向url添加一个哈希：

const ParentComponent = () =>
  <div onClick={() => appendHash(#example)}>
    <ChildComponent />
  </div>

constparentcomponent=（）=>
appendHash（#示例）}>

以及子组件：

const ChildComponent = () => {
  <div>
   ...
   <input ... />
   ...
  </div>

}

constchildcomponent=（）=>{
...
...
}

发生的情况是，当我最初单击

输入中的焦点时，它会聚焦一秒钟，然后随着url散列的添加而失去焦点。添加散列后，
输入
按预期工作<当在
ParentComponent
中触发
onClick
时，将重新呈现code>ChildComponent

，强制

输入失去焦点

如何防止这种情况发生？
您可以与子组件一起使用，这将阻止它重新渲染。您可以与子组件一起使用，这将阻止它重新渲染。