升级React 17后onBlur事件无法触发，如何恢复原行为？

React 17 调整了焦点事件的映射规则，原本的onBlur现在对应原生focusout事件（之前是绑定原生blur），这就导致你原来的_blurHandler触发逻辑和之前不一样了。要恢复React 16时期的onBlur行为，有两种可行的办法：

方法一：手动绑定原生blur事件 #

通过React的ref获取DOM元素，直接添加原生blur事件监听，完全复刻之前的触发逻辑：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.editorRef = React.createRef();
    this._blurHandler = this._blurHandler.bind(this);
  }

  componentDidMount() {
    this.editorRef.current.addEventListener('blur', this._blurHandler);
  }

  componentWillUnmount() {
    this.editorRef.current.removeEventListener('blur', this._blurHandler);
  }

  _blurHandler(e) {
    // 这里写你原来的处理逻辑
  }

  render() {
    return (
      <div
        id={'editor1'}
        tabIndex={-1} 
        ref={this.editorRef}
      />
    );
  }
}

方法二：在focusout事件中过滤冒泡场景 #

如果不想用ref，可以在现有的onBlur（也就是原生focusout）回调里，通过事件对象的relatedTarget判断焦点是否真的移出了当前元素及子树，以此模拟原生blur的行为：

_blurHandler(e) {
  // 只有当焦点完全离开当前元素及其子元素时，才执行原逻辑
  if (!e.currentTarget.contains(e.relatedTarget)) {
    // 这里写你原来的处理逻辑
  }
}

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