jquery - 为什么 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') 的快捷方式其中说

A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user

和

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

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

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