Native和ReactJS事件的排序

所以我有這個例子來顯示我正在運行的一些代碼，我現在正在處理的代碼（無法發佈確切的代碼，原因很多）。Native和ReactJS事件的排序

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'));

在這裏我有一個在安裝中增加了原生Click事件處理程序的文件，因爲我需要跟蹤的任何地方發生的頁面上，而不僅僅是這個組件中的任何點擊的組件。我也有一個具有ReactJS事件處理程序的按鈕。如果我點擊按鈕外的任何地方，一切正常。如果我點擊按鈕，這兩個事件都會觸發，但是本機事件先被觸發，然後是React事件，但是我需要首先觸發React事件。

如何確保本機連接的事件始終在React事件之後執行？

來源

2015-07-10 ryanzec

看來事件是按照添加偵聽器的順序觸發的。我做了一些挖掘，發現DOM3 spec中的一些信息似乎支持這一點，但我仍然不確定預期的行爲應該是什麼。

在任何情況下，我測試了我的理論，它似乎得到期望的效果：http://codepen.io/anon/pen/EjLRbK

總結：您目前在componentWillMount創建本地事件監聽器。該函數在組件初始調用render之前執行，因此首先創建本地事件偵聽器。如果將其更改爲componentDidMount，它將在首次調用render後執行，並且將首先創建render中的事件偵聽器，並在您的示例代碼中單擊該按鈕時將首先調用該偵聽器。

來源

2015-07-10 21:08:39

Native和ReactJS事件的排序

回答

相關問題