如何使用 JS 或 jQuery 触发 React 16 的模拟更改和输入事件？答案

【问题标题】：How to use JS or jQuery to trigger simulated change and input events for React 16?如何使用 JS 或 jQuery 触发 React 16 的模拟更改和输入事件？
【发布时间】：2017-11-07 23:31:07
【问题描述】：

我正在尝试使用纯 JS 或 jQuery 在 React 表单上触发输入/更改事件。使用 react-dom 15.6.0，您可以在事件对象上使用模拟标志让事件通过

var ev = new Event('input', { bubbles: true});
ev.simulated = true;
element.value = 'Something new';
element.dispatchEvent(ev);

示例： https://codepen.io/catthr/pen/PKXzLQ

所以这条评论的原始建议曾经奏效：https://github.com/cypress-io/cypress/issues/536#issuecomment-308739206

但是在 React 16 发布之后，这并没有按预期触发输入和更改事件。

在 React 16 中处理输入数据变化的方式有哪些内部变化？

【问题讨论】：

注意我在尝试触发时无法在外部使用 React JS

标签： javascript jquery reactjs dom-events react-dom

【解决方案1】：

将输入更改传递给状态 => 当状态更改时，会触发生命周期钩子，在那里处理逻辑。

不确定您要做什么，但原版 javascript 应该足够了

您想在提交时做什么？你在跟踪什么事件？

在我得到一些澄清后，我会尽力为您提供更多帮助

谢谢:)

【讨论】：

谢谢，基本上是尝试使用纯 JS 或 jQuery 以编程方式在基于 React 的输入组件中输入一个值。一旦在输入字段中输入了一个值，就会启用一个按钮，但这不会发生，因为不再触发事件。上面的代码在输入组件上使用 React 16 之前可以工作。但似乎这不起作用。 react组件脚本是外部的，无法更改，只能使用纯JS/jQuery访问。
如果输入被聚焦并且有一些 {JSX 条件渲染}，请尝试跟踪状态
在组件上确实安装了 let input = document.getElementById('myInput'); input.addEventListener('focus', () => { console.log('poop') }) in render
基本上，您可以做到这一点的一种方法是设置状态更改，事件侦听器附加到焦点输入上，如果不是这样，您可以跟踪焦点/无焦点 lmao 的状态，跨度>
希望有帮助:)