React渲染输入的触发器更改事件（类型=范围）

“反应”：“^ 15.4.2”

我无法从jquery触发使用React呈现的输入的更改事件。 我需要做一些端到端的测试。

这是一个沙箱作为一个完整的展示： https ：//codesandbox.io/s/pp1k1kq3om已经加载了jquery。

如果你在控制台中运行：$（’＃reactSlider’）。val（50）.change（），你会注意到没有调用更改处理程序。

在上面的沙箱中还有一个纯html滑块用于比较，一个按预期工作（调用更改函数）。

还试图派出这样的新事件：

var event = new Event('change') var target = $('#reactSlider')[0]; target.dispatchEvent(event); 

以上也不起作用（并且可以在纯html滑块上工作）。

 import React from "react"; import { render } from "react-dom"; const changeHandler = event => { alert(`react slider changed:${event.target.value}`); }; const App = () => ( 
 react-slider  
run in the console: $('#reactSlider').val(50).change()
 
 
 
Notice that for the React slider, the change event is not triggered.
 
 ); render(, document.getElementById("root")); 

Answer 1

好的，所以我找到了一种解决方法。 看起来onInput事件可以被触发就好了。 在输入类型=’范围’的情况下，“输入”事件在与“更改”相同的情况下被触发，因此我能够切换它。

解决方法是：使用onInput而不是onChange并像这样触发它：

 function triggerChange(selector,evt) { let ev = new Event(evt, { bubbles: true }); let el = $(selector)[0] el.dispatchEvent(ev); }; triggerChange('#reactSlider','input');