为什么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。

无论如何，这就是它的原因 ，因为这就是你想知道的。 只是本机地触发事件会使您的测试与您的实现选择相结合。