React中如何检测FocusOut事件？

嘿，刚好清楚这个点！在React里，你要找的FocusOut对应的事件其实是**onBlur和onBlurCapture**——React对原生DOM事件做了封装，用了更简洁直观的命名，把原生的focusout映射成了blur，和你熟悉的onFocus（对应原生focusin）正好对应。

你原来代码里的onUNKNOWN替换成这两个中的一个就可以，具体选哪个取决于你需要在事件的哪个阶段触发：

• onBlur：在事件冒泡阶段触发，和onFocus的触发阶段对应
• onBlurCapture：在事件捕获阶段触发，和onFocusCapture的触发阶段对应

修改后的代码示例：

render() {
  return (
    <input 
      onFocusCapture={this.handleFocusIn} 
      onBlurCapture={this.handleFocusOut} 
      // 或者根据需求用onBlur
      // onBlur={this.handleFocusOut}
    />
  );
}

简单说下阶段区别：捕获阶段是事件从外层DOM往目标DOM传递的过程，冒泡阶段则是从目标DOM往外传递的过程。如果你的组件有嵌套结构，需要父元素优先处理失去焦点的事件，就用onBlurCapture，日常场景用onBlur就足够啦。

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