我们使用 Backbone + ReactJS bundle 来构建客户端应用程序。严重依赖臭名昭著的valueLink我们通过自己的包装器将值直接传播到模型，该包装器支持用于双向绑定的 ReactJS 接口。
现在我们面临的问题是：
我们有jquery.mask.js以编程方式格式化输入值的插件，因此它不会触发 React 事件。所有这些都会导致模型从用户输入接收未格式化的值而从插件中丢失格式化的值。
似乎 React 有很多取决于浏览器的事件处理策略。有没有什么通用的方法可以触发特定 DOM 元素的更改事件，以便 React 能够听到它？
对于 React 16 和 React >=15.6
Setter.value=没有按我们想要的方式工作，因为 React 库覆盖了输入值 setter，但我们可以直接在inputas 上下文中调用该函数。
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(input, 'react 16 value');
var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);
对于textarea元素，你应该使用prototype的HTMLTextAreaElement类。
新的代码笔示例。
仅适用于 React <=15.5 的过时答案
有了react-dom ^15.6.0您可以使用simulated标志事件对象的事件经过
var ev = new Event('input', { bubbles: true});
ev.simulated = true;
element.value = 'Something new';
element.dispatchEvent(ev);
为了理解为什么需要新标志，我发现这条评论非常有帮助：
React 中的输入逻辑现在对更改事件进行重复数据删除，因此每个值不会触发超过一次。它侦听浏览器 onChange/onInput 事件以及 DOM 节点值 prop 上的设置（当您通过 javascript 更新值时）。这意味着如果你手动更新输入的值 input.value = 'foo' 然后使用 { target: input } 调度 ChangeEvent react将注册集合和事件，看到它的值仍然是''foo '，将其视为重复事件并吞下它。
这在正常情况下工作正常，因为“真实”浏览器启动的事件不会触发 element.value 上的设置。您可以通过使用模拟标志标记您触发的事件来秘密地摆脱这种逻辑，并且 react 将始终触发该事件。 https://github.com/jquense/react/blob/9a93af4411a8e880bbc05392ccf2b195c97502d1/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js#L128
至少在文本输入上，它似乎onChange在监听输入事件：
var event = new Event('input', { bubbles: true });
element.dispatchEvent(event);
我知道这个答案来得有点晚，但我最近遇到了类似的问题。我想在嵌套组件上触发一个事件。我有一个包含单选和复选框类型小部件的列表（它们是行为类似于复选框和/或单选按钮的 div），在应用程序的其他地方，如果有人关闭了一个工具箱，我需要取消选中一个。
我找到了一个非常简单的解决方案，不确定这是否是最佳实践，但它有效。
var event = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false
});
var node = document.getElementById('nodeMyComponentsEventIsConnectedTo');
node.dispatchEvent(event);
这触发了 domNode 上的点击事件，我通过 react 附加的处理程序确实被调用了，所以它的行为就像我期望的那样，如果有人点击了元素。我没有测试过 onChange 但它应该可以工作，并且不确定这在 IE 的真正旧版本中如何公平，但我相信 MouseEvent 至少在 IE9 及更高版本中受支持。
对于我的特定用例，我最终放弃了这个，因为我的组件非常小（只有我的应用程序的一部分使用了 react，因为我还在学习它）而且我可以用另一种方式实现同样的事情，而无需获取对 dom 节点的引用。
更新：
正如其他人在评论中所说的那样，最好使用this.refs.refname来获取对 dom 节点的引用。在这种情况下， refname 是您通过<MyComponent ref='refname' />.
扩展 Grin/Dan Abramov 的答案，这适用于多种输入类型。在 React >= 15.5 中测试
const inputTypes = [
window.HTMLInputElement,
window.HTMLSelectElement,
window.HTMLTextAreaElement,
];
export const triggerInputChange = (node, value = '') => {
// only process the change on elements we know have a value setter in their constructor
if ( inputTypes.indexOf(node.__proto__.constructor) >-1 ) {
const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
const event = new Event('input', { bubbles: true });
setValue.call(node, value);
node.dispatchEvent(event);
}
};
您可以使用ReactTestUtils模拟事件，但它是为单元测试而设计的。
我建议不要在这种情况下使用 valueLink，而只是监听插件触发的更改事件并更新输入的状态作为响应。双向绑定实用程序更像是一个演示，而不是其他任何东西；它们包含在插件中只是为了强调这样一个事实，即纯双向绑定不适用于大多数应用程序，并且您通常需要更多应用程序逻辑来描述应用程序中的交互。