Javascript 为什么输入元素不'；组件重新渲染后是否无法恢复焦点？

代码如下：

export class Editor extends Component {
   constructor(props) {
      super(props);
      this.state = {
         name: ""
      }
   }

   handleChange = (event) => {
        event.persist();
        this.setState({ name: event.target.value });
   }

   render() {
      ...
       <input name="name" autoFocus={true} value={this.state.name} onChange={this.handleChange} />
       <button onClick={this.handleAdd}>
          Add
       </button>
   }
}

导出类编辑器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
姓名：“
}
}
handleChange=（事件）=>{
event.persist（）；
this.setState（{name:event.target.value}）；
}
render（）{
...
添加
}
}

因此，组件第一次呈现时，输入元素确实具有焦点，因为我使用了

autoFocus={true}

。但在我点击按钮后，焦点没有返回到输入，而是停留在按钮上。我的问题是:

---

为什么输入没有重新获得焦点？由于onClick处理程序更新了组件的状态，这使得组件重新渲染，当组件重新渲染时，

autoFocus={true}

是否也将重新应用？

否，这不是因为react仅重新渲染已更改的元素，这很好地解释了这一点，您可能需要检查这一点。快乐编码

如果使用“自动聚焦”，则只有初始渲染具有焦点。由于React智能地仅重新渲染已更改的元素，因此“自动聚焦”属性在所有情况下都不可靠

如果使用一个功能组件，会更容易，但是可以在类组件中执行以下操作

export class Editor extends Component {
   constructor(props) {
      super(props);
      this.state = {
         name: ""
      }
      this.nameInput = React.createRef();
   }

   handleChange = (event) => {
        event.persist();
        this.setState({ name: event.target.value });
   }

   handleAdd = () => {
       this.nameInput.current.focus();
   }

   render() {
      ...
       <input ref={this.nameInput} name="name" autoFocus={true} value={this.state.name} onChange={this.handleChange} />
       <button onClick={this.handleAdd}>
          Add
       </button>
   }
}

导出类编辑器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
姓名：“
}
this.nameInput=React.createRef（）；
}
handleChange=（事件）=>{
event.persist（）；
this.setState（{name:event.target.value}）；
}
handleAdd=（）=>{
this.nameInput.current.focus（）；
}
render（）{
...
添加
}
}

如果您想了解另一种方法，可以查看以下内容：

及

---

谢谢你的回答。我知道这种方法，称为使用REF的非受控表单组件。因此，只需与您确认：即使自动对焦更改，输入元素仍被视为未更改？这是聪明还是愚蠢？事实上，这需要反应方来解决，但他们还没有找到解决方案。我们需要一个这样的方法，但仍然没有公关和合并。顺便说一句，你可以在componentDidUpdate中关注这一点，或者在功能组件中使用效果。