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

Posted 2023-05-09

【中文标题】触发 React 渲染输入的更改事件（类型=范围）

【英文标题】：Trigger change event for React rendered input (type=range)

【发布时间】：2018-09-21 19:48:29

【问题描述】：

“反应”：“^15.4.2”

对于使用 React 呈现的输入，我无法从 jquery 触发更改事件。 我需要这样做以进行一些端到端的测试。

这是一个完整展示的沙盒：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"));

【问题讨论】：

jQuery 注册/处理自己的事件监听器，并且在以编程方式调用时不会调用非 jQuery 事件监听器。

这里最好的做法是有一个单独的函数来执行你想在更改时执行的任何内容，并从您的changeHandler 中调用该函数，并在您更改时独立调用它以编程方式的值。如果您需要能够从控制台处理更改事件，请设置一个单独的 jQuery 事件处理程序来捕获更改事件，然后从那里调用您的函数

@mhodges 不幸的是，按照你的建议去做会破坏我的测试目的，我正在寻找一种与反应呈现的输入交互并触发它的反应变化事件监听器的方法。有没有可能做到这一点？

How can I trigger an onchange event manually?的可能重复

看起来不像是重复的，我已经尝试调度一个新事件，仍然没有触发反应事件监听器。

【参考方案1】：

好的，所以我找到了一种解决方法。 看起来 onInput 事件可以很好地触发。在 input type='range' 的情况下，“input”事件在与“change”相同的情况下被触发，所以我能够切换它。

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

function triggerChange(selector,evt) 
    let ev = new Event(evt,  bubbles: true );
        let el = $(selector)[0]

        el.dispatchEvent(ev);
  ;
triggerChange('#reactSlider','input');