為什么jQuery中的'change'事件不會在ReactJS中觸發onChange？

Question

我正在為karma + PhatomJS編寫ReactJS組件的測試。 我正在渲染組件並使用jQuery作為目標dom元素和模擬用戶操作的快捷方式。 單擊，文本輸入等工作正常。 但是，select中的選擇似乎不執行組件的onChange事件。 這是代碼：

import React from 'react'
import ReactDOM from 'react-dom'
import $ from 'jquery'

class SelectComponent extends React.Component {
    handleChange (event) {
        // This is NEVER fired
        doSomething()
    }
    render () {
        return (
            <select id='Fruits' onChange={this.handleChange.bind(this)}>
                <option value='A'>Apple</option>
                <option value='B'>Banana</option>
                <option value='C'>Cranberry</option>
            </select>
        )
    }
}

ReactDOM.render(<SelectComponent />, document.createElement('div'))

// Pragmatically change the selection
$('#Fruits').val('B').change()

但是，沒有jQuery，它似乎工作得很好。 當我將最后一行更改為：

const element = document.getElementById('Fruits')
element.value = value
element.dispatchEvent(new Event('change', { bubbles: true }))

ReactJS中的回調被觸發了 ！

我無法發現任何差異。 我認為上面的代碼實際上與jQuery對.val（'B'）.change（）的作用相同。 或許一個jQuery忍者可以給我一個暗示嗎？

Answer 1

它不適用於jQuery change()因為它不會觸發“真正的” change事件。 它是.trigger（'change'）的捷徑

對.trigger（）的調用以與用戶自然觸發事件時相同的順序執行處理程序

和

雖然.trigger（）模擬事件激活，但是使用合成的事件對象，它並不能完美地復制自然發生的事件。

我相信這樣做是為了幫助支持具有不同事件處理的非常舊版本的IE。

無論如何，這就是它的原因 ，因為這就是你想知道的。 只是本機地觸發事件會使您的測試與您的實現選擇相結合。