如何以编程方式触发<；选择>；是否使用普通DOM Javascript更改React组件？

我有一个简单的反应组件：

state = {
  value: '',
};

render() {
  return <select onChange={this.handleChange} value={this.state.value}>
    <option value="">--</option>
    <option value="1">One</option>
  </select>;
}

handleChange = (e) => {
  this.setState({
    value: e.target.value,
  });
  console.log('Handling Change!!')
};

但是这些都不会触发React组件中的

onChange

处理程序，因此状态不会得到更新

我的问题是：如何使用DOM和Javascript触发

onChange

处理程序

[编辑]

为了进一步澄清，我将按如下方式安装React组件：

el = document.createElement('div')
ReactDOM.render(MySelect, el)

$select = $(el).find('select');
$select.val('1');
// then
$select.trigger('change');
// or
$select.trigger('input');

el = document.createElement('div')
ReactDOM.render(MySelect, el)
document.body.appendChild(el) // <-- attach to DOM

---

回答我自己的问题，为了子孙后代

事实证明，这个问题是双重的。但首先，一些背景：

反应事件

React事件系统通过委派给根节点来侦听本机DOM事件。i、 e.它不使用

onChange

将侦听器附加到每个元素，而只是侦听根文档中通过DOM冒泡的事件

对于那些熟悉jQuery委托事件的人来说，这类似于

$(document).on('change', '.my-select', callback)

jQuery事件

其次，jQuery本身在某种程度上“覆盖”了DOMs本机事件，该事件在其自己的系统中冒泡，这就是如何抛出自定义事件的方法

解决方案。。。 如上所述，我有两个问题，因此有两个解决方案：

首先 由于jQuery使用其自己的事件系统，因此使用

$(select).trigger('change')

不会到达React的根事件侦听器。所以我们用本地的

select.dispatchEvent(new Event('change', {bubbles, true}));

…但这还不够

秒 DOM事件从元素冒泡到文档根。但是请注意，我从未将我的元素附加到文档！！

change

事件冒泡到。。。哪儿也没有！同样，它从未到达文档上注册的React事件侦听器

如果我像这样将我的元素添加到DOM中：

el = document.createElement('div')
ReactDOM.render(MySelect, el)

$select = $(el).find('select');
$select.val('1');
// then
$select.trigger('change');
// or
$select.trigger('input');

el = document.createElement('div')
ReactDOM.render(MySelect, el)
document.body.appendChild(el) // <-- attach to DOM

el=document.createElement（'div'））
render（MySelect，el）
document.body.appendChild（el）//这似乎是一个。你想达到什么目标？你需要它做什么？@FrankerZ我试图解决的问题是，我有一个非反应代码库，它使用jQuery来查询和测试UI的行为，现在我想使用相同的测试来“反应”代码库。这是问题及其解决方案的一个非常清楚的分解。这真的很有帮助！