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（＆＃39; B＆＃39;）。change（）的作用相同。或许一个jQuery忍者可以给我一个提示吗？

Answer 1

它不适用于jQuery change()，因为它不会触发“真正的”change事件。这是.trigger('change')的捷径，

对.trigger（）的调用以与用户自然触发事件时相同的顺序执行处理程序

和

虽然.trigger（）模拟事件激活，但是使用合成的事件对象，它并不能完美地复制自然发生的事件。

我相信这样做是为了帮助支持对事件处理不同的旧版IE。

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

为什么不改变＆＃39;在ReactJS中jQuery fire onChange中的事件？

1 个答案: