React类组件如何借助refs实现focus/blur控制div与input切换（无Hooks）

代码功能失效的核心原因 #

• 原生<div>默认不具备可聚焦能力，无法触发focus/blur系列事件。哪怕手动调用this.textInput.current.focus()，浏览器也会对非可聚焦元素的focus调用做静默处理，不会触发绑定的焦点回调。
• 代码中onFocus={this.showIt}绑定了不存在的showIt方法，就算div能正常接收焦点，这个绑定也会直接抛出运行时错误。
• 官方refs示例没有绑定focus事件，是因为示例的核心演示目标是“通过refs直接调用DOM元素的原生方法”，并非演示交互逻辑触发。如果需要依赖焦点事件执行关联逻辑，要么给交互元素加tabIndex属性让它成为可聚焦节点，要么直接使用天生可聚焦的元素（比如input、button），不要尝试给不可聚焦的div绑定焦点事件。

失焦检测的实现逻辑 #

• 对于可聚焦元素，直接在元素上绑定onBlur回调即可：当元素失去焦点、用户点击页面其他任意位置时，浏览器会自动触发该元素的blur事件，不需要全局监听页面点击事件。
• 这个原生行为完全可以满足“点击输入框外的位置切回div”的需求，不需要额外编写全局点击判断的冗余逻辑。

交互逻辑与React渲染流程的适配方案 #

• 完全不需要手动在两次渲染之间维持元素焦点状态。React本身是状态驱动渲染的框架，所有切换逻辑只需要通过组件state标记当前是展示div还是编辑input状态，修改state就会自动触发组件重渲染。
• 通用实现逻辑：当state从非编辑态切换到编辑态时，新的input元素会被挂载到DOM上，这时候在componentDidUpdate生命周期钩子里，通过refs给刚挂载的input主动调用focus()方法，就能让输入框自动获得焦点，不需要手动追踪两次渲染之间的焦点状态。
• 当input触发blur事件时，只需要更新state切回div的渲染逻辑，React会自动卸载旧的input节点，整个流程完全符合React的单向数据流规则，不需要绕过渲染流程手动操作DOM焦点。

无Hooks类组件参考实现 #

class EditableItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isEditing: false,
      content: props.defaultContent || 'Item Name'
    };
    this.inputRef = React.createRef();
  }
  // 点击div切换到编辑状态
  startEdit = () => {
    this.setState({ isEditing: true });
  };
  // input失焦时切回展示状态
  endEdit = () => {
    this.setState({ isEditing: false });
  };
  // 同步输入框内容到state
  updateContent = (e) => {
    this.setState({ content: e.target.value });
  };
  // 编辑状态切换完成、input挂载后自动聚焦
  componentDidUpdate(prevState) {
    if (!prevState.isEditing && this.state.isEditing) {
      this.inputRef.current.focus();
    }
  }
  render() {
    // 编辑态渲染input
    if (this.state.isEditing) {
      return (
        <input
          className="item-class"
          ref={this.inputRef}
          value={this.state.content}
          onChange={this.updateContent}
          onBlur={this.endEdit}
        />
      );
    }
    // 展示态渲染div
    return (
      <div
        className="item-class"
        onClick={this.startEdit}
      >
        {this.state.content}
      </div>
    );
  }
}

补充说明 #

• 如果确实需要给div绑定focus事件，只需要给div加上tabIndex={0}属性，它就会成为可聚焦元素，能正常响应焦点事件。但对于当前的编辑切换场景，用state驱动的div/input切换方案，比手动给div加tabIndex做焦点判断的方案要稳定得多，也能避免很多边界case的兼容问题。
• 之前遇到的手动focus不触发回调的问题，本质上是因为div不是可聚焦元素，就算强行给div加tabIndex，后续的失焦判断逻辑也要单独处理，远不如直接用input替代div做编辑态的实现效率高。

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