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

Question

“反应”：“^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 = () => (
  <div>
    <label htmlFor="reactSlider">react-slider</label>
    <input
      id="reactSlider"
      type="range"
      onChange={changeHandler}
      min={10}
      max={100}
      step={10}
      value={20}
    />
    <p>run in the console: $('#reactSlider').val(50).change()</p>
    <br />
    <br />
    <p>Notice that for the React slider, the change event is not triggered.</p>
  </div>
);

render(<App />, 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');