为什么jQuery中的“更改”事件没有在ReactJS中触发onChange？

Question

我正在为业力+ ReactJS中的PhatomJS组件编写测试。我使用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(“变化”)的捷径，上面写着

对.trigger()的调用以相同的顺序执行处理程序，如果事件是由用户自然触发的

和

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

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

不管怎么说，这就是为什么，因为这就是你想知道的。仅仅本机触发事件就可以减少测试与实现选择的耦合。