javascript - 为什么组件重新渲染后输入元素没有重新获得焦点？

Question

下面是代码:

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>
   }
}

因此，组件第一次渲染时，输入元素确实具有焦点，因为我使用了 autoFocus={true}。但是当我点击按钮后，焦点并没有回到输入，而是停留在按钮上。我的问题是:

为什么输入没有重新获得焦点？由于 onClick 处理程序更新了组件的状态，这使得组件再次重​​新渲染，当组件重新渲染时， autoFocus={true} 不是也会重新应用吗？

Answer 1

如果您使用自动对焦，则只有初始渲染才会获得焦点。由于 React 仅智能地重新渲染已更改的元素，因此 autofocus 属性并非在所有情况下都可靠。

如果您使用函数组件会更容易，但您可以在类组件中执行以下操作。

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>
   }
}

如果您想了解另一种方法，您可以查看此处:https://stackoverflow.com/a/54159564/5562701

和

https://davidwalsh.name/react-autofocus