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

Answer 2

不，这不是因为只有反应才能重新渲染已更改的元素，David Walsh对此进行了很好的解释，您可能需要检查一下。编码愉快！

为什么在重新渲染组件后输入元素无法重新获得焦点？

2 个答案: