React类组件点击编辑按钮后如何实现对应输入框自动聚焦？

问题根因 #

你当前实现不生效的核心原因是 React 的 setState 是异步更新操作：调用toggleView修改editView状态后，立刻执行this.editInput.current.focus()时，状态还没有完成更新，输入框还未被渲染到DOM树中，this.editInput.current此时为null，聚焦操作自然不会生效。

推荐实现方案 #

方案1：使用 setState 回调（无需封装独立组件，改造成本最低） #

setState支持传入第二个参数作为回调函数，会在状态更新完成、DOM重新渲染结束后触发，你只需要把聚焦逻辑放到这个回调里即可。
修改后的代码如下：

// 调整toggleView支持传入回调
toggleView(callback){
    this.setState(prevState => (
        {editView: !prevState.editView }
    ), callback)
}

editMode(){
    // 把聚焦逻辑作为回调传入，等状态更新、输入框渲染完成后再执行
    this.toggleView(() => {
        this.editInput.current?.focus();
    });
}

代码中加可选链?.是为了避免边界场景下ref为空时报错，你也可以补充非空判断后再执行focus逻辑。

方案2：封装独立编辑输入框组件（适合复用场景） #

如果你的项目多处需要用到自动聚焦的编辑输入框，可以把输入框封装为独立组件，在组件的componentDidMount生命周期钩子中触发聚焦，更符合组件复用的设计：

class EditInput extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  componentDidMount() {
    this.inputRef.current.focus();
  }
  render() {
    return <input ref={this.inputRef} {...this.props} />
  }
}

// 原Item组件中使用时直接替换即可，不需要再手动执行focus
const itemView = !this.state.editView ? 
  <div className="item">{this.props.detail}</div> : 
  <EditInput className="edit-item-input" placeholder={this.props.detail + "..."} /> ;

内容的提问来源于stack exchange，提问作者bradmeyn