Question

jsfiddle：https://jsfiddle.net/leiming/5e6rtgwd/

＆＃13;

class Sample extends React.Component {

  onInputFocus(event) {
    console.log('react input focus')
  }

  onSpanFocus(event) {
    console.log('react span focus')
      // event.stopPropagation()
  }

  render() {
    return ( <span onFocus = {this.onSpanFocus}>
      react input: <input type="text"
      onFocus = {this.onInputFocus} />
      </span> )
  }
}

ReactDOM.render( < Sample / > ,
  document.getElementById('container')
);

＆＃13;

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

<div>
  <span onfocus="(function(){console.log('normal span')})()">
  normal input:<input type="text" onfocus="(function(){console.log('normal input focus')})()">
</span>
</div>

＆＃13;

jsfiddle：https://jsfiddle.net/leiming/5e6rtgwd/

使用React，onFocus中的<input/>会冒泡，这与通常的HTML5不同。

任何人都可以给我推荐文件，为什么要把反射泡沫与React结合起来？

Answer 1

focus个事件do not bubble，因此您需要更正React中的行为与DOM的行为不同。 DOM有focusin个事件that does bubble;这是一个示范：

＆＃13;

<div>
  <span onfocus="(function(){console.log('span focus')})()">
    onfocus: <input type="text"
              onfocus="(function(){console.log('input focus')})()">
  </span>
</div>

<div>
  <span onfocusin="(function(){console.log('span focusin')})()">
    onfocusin: <input type="text" 
                onfocusin="(function(){console.log('input focusin')})()">
  </span>
</div>

＆＃13;

翻阅the React source code，这似乎是有意的;代码检查浏览器是否支持focus事件捕获，并使用focus而不是ReactEventListener.trapCapturedEvent通过ReactEventListener.trapBubbledEvent事件实现它}。这是必要的，因为React使用事件委托来实现其合成事件系统，因此需要使用捕获或冒泡来处理所有事件。 The article linked to in the comment解释了这是如何运作的：

问题是这些事件不会冒泡。链接上的焦点或模糊事件仅在链接本身上触发，而不在链接的任何祖先元素上触发。

这是一个古老的规则。一些事件，尤其是焦点，模糊和变化，不会冒泡文档树。造成这种情况的确切原因已经在历史的迷雾中消失了，但部分原因是这些事件对某些因素没有意义。用户无法以任何方式关注或更改随机段落，因此这些事件在这些HTML元素上不可用。此外，他们不会冒泡。

...

除非您使用事件捕获。

...

我的事件研究最奇怪的结论之一是，当您在捕获阶段定义事件处理程序时，浏览器会执行在事件目标的祖先上设置的任何和所有事件处理程序，以确定给定事件是否对这些事件有意义元素与否。

似乎很可能React团队决定简单地让事件始终冒泡（说实话，这也是我对DOM规范的预期，直到我读到你的问题）。浏览器的实现似乎并不一致; one issue comment提到focus事件在Firefox中冒泡，但我无法在最近的版本中重现这一点。但是，使用onfocusin属性或使用addEventListener("focusin", ...)也无法在FF中使用。因此，这可能只是尝试在浏览器中规范化事件。

所有这一切，似乎确实存在一个错误，即.bubbles上的SyntheticFocusEvent属性为false而不是true。

React

1 个答案: