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

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 handler更新了组件的状态，使得组件重新渲染，当组件重新渲染时，是不是autoFocus={true}也会重新申请？

Answer 1

不，它不会，因为 react 只会重新渲染已更改的元素，David Walsh 很好地解释了这一点，您可能想检查一下。编码愉快！

Answer 2

如果您使用自动对焦，则只有初始渲染会有焦点。由于 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