Events 本机和ReactJS事件的排序

因此，我用这个例子来说明我现在正在处理的一些代码遇到的问题（由于许多原因，无法发布确切的代码）

var Test1=React.createClass({
getInitialState:函数（）{
返回{
事件：[“已加载演示”]，
按钮勾选：假
};
},
componentWillMount:function（）{
document.addEventListener（'click'，this.onDocumentClick）；
},
onDocumentClick:函数（）{
var message='在文档单击事件上（单击的按钮：'+this.state.buttonClicked+'）；
这是我的国家({
事件：this.state.events.concat（[message]），
按钮勾选：假
});
},
onButtonClick:function（）{
这是我的国家({
事件：this.state.events.concat（['on button click event']），
按钮点击：正确
});
},
render:function（）{
返回(
按钮
活动：

{this.state.events.map（函数（消息））{
返回
{message}
；
})}

);
}
});
反应(
, 
getElementById（'mount-point'）；

在这里，我有一个组件，它在挂载时在文档上添加了一个本机单击事件处理程序，因为我需要跟踪页面上任何地方发生的任何单击，而不仅仅是在这个组件中。我还有一个按钮，它有一个ReactJS事件处理程序。如果我点击按钮之外的任何地方，一切正常。如果我单击该按钮，将触发两个事件，但是首先触发本机事件，然后触发React事件，但是我需要首先触发React事件

---

如何确保在React事件之后始终执行本机附加的事件？

事件似乎是按照添加侦听器的顺序触发的。我做了一些挖掘，在中发现了一些似乎支持这一点的信息，但我仍然不太确定预期的行为应该是什么

无论如何，我测试了我的理论，它似乎给出了预期的效果：

---

总而言之：您当前正在

componentWillMount

中创建本机事件侦听器。此函数在组件初始调用

render

之前执行，因此首先创建本机事件侦听器。如果将其更改为

componentDidMount

，它将在初始调用

render

后执行，并且将首先创建

render

中的事件侦听器，并在单击示例代码中的按钮时首先调用它。

根据我的调试经验，在呈现实际组件树之前，已经在“root”元素上注册了两个单击事件处理程序。因此，“root”元素上的任何dom事件侦听器都是从索引2中添加的。因此，总是首先触发react事件，然后在“root”元素上触发dom事件

var Test1 = React.createClass({
  getInitialState: function() {
    return {
      events: ['Demo loaded'],
      buttonClicked: false
    };
  },

  componentWillMount: function() {
    document.addEventListener('click', this.onDocumentClick);
  },

  onDocumentClick: function() {
    var message = 'on document click event (button clicked: ' + this.state.buttonClicked + ')';
    this.setState({
      events: this.state.events.concat([message]),
      buttonClicked: false
    });
  },

  onButtonClick: function() {
    this.setState({
      events: this.state.events.concat(['on button click event']),
      buttonClicked: true
    });
  },

  render: function() {
    return (
      <span>
        <button onClick={this.onButtonClick}>Button</button>
        <div>Events:</div>
        <ul>
          {this.state.events.map(function(message) {
            return <li>{message}</li>;
          })}
        </ul>
      </span>
    );
  }
});

React.render(
  <Test1 />, 
  document.getElementById('mount-point'));