为什么 jQuery 中的 'change' 事件不会在 ReactJS 中触发 onChange？

Question

我正在为 karma + PhatomJS 中的 ReactJS 组件编写测试。我正在渲染组件并使用 jQuery作为定位 dom 元素和模拟用户操作的快捷方式。单击，文本输入等工作正常。但是，选择中的选择似乎没有执行组件的 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 ninja 可以给我一个提示？

Answer 1

它不适用于 jQuery，change()因为它不会触发“真实”change事件。这是.trigger('change')的快捷方式，其中表示

调用 .trigger() 会按照事件由用户自然触发的顺序执行处理程序

和

尽管 .trigger() 模拟事件激活并使用合成事件对象完成，但它并不能完美地复制自然发生的事件。

我相信这样做是为了帮助支持具有不同事件处理方式的非常旧版本的 IE。

无论如何，这就是原因，因为这就是你想知道的。仅以本机方式触发事件可以减少测试与实现选择的耦合。