使用 JS 更改反应输入组件的值不会触发输入 onChange 事件

Question

我有一个范围输入，它发生了一些事情onChange 。 这与我期望的手动单击/拖动使用一样有效。 但是，当我尝试使用 JavaScript 更改该值时，我的onChange事件似乎没有触发。

这是我的代码：

const App = () => {
  const [currentValue, setCurrentValue] = useState(0);

  const setRangeValue = () => {
    const range = document.querySelector("input");

    range.value = 50;
    range.dispatchEvent(new Event("change", { bubbles: true }));
  };

  return (
    <div className="App">
      <h1>Current Value: {currentValue}</h1>

      <input
        type="range"
        min={0}
        max={100}
        step={10}
        onChange={e => {
          console.log("Change!");
          setCurrentValue(+e.target.value);
        }}
        defaultValue={0}
      />

      <button onClick={setRangeValue}>Set current value to 50</button>
    </div>
  );
};

在这里它（不）在 CodeSandbox 中工作： https ://codesandbox.io/s/divine-resonance-rps1n

笔记：

只是为了澄清。 我的实际问题来自使用 jest/react 测试库测试我的组件。 按钮演示只是一种将问题可视化的好方法，而不必陷入必须复制我所有测试内容的杂草中。

    const getMessage = (value, message) => {
        const slider = getByRole('slider');
        fireEvent.change(slider, { target: { value } });
        slider.dispatchEvent(new Event('change', { bubbles: true }));
        return getByText(message).innerHTML;
    };

当 fireEvent 更改值时，它不会运行附加到输入的onChange事件。 这意味着getByText(message).innerHTML是不正确的，因为它只会在 set 钩子被调用时更新onChange 。 （所有这些在手动单击/拖动输入滑块时都有效，我只是无法“测试”它）

任何帮助都会很棒！

Answer 1

问题是 React 有一个不直接连接到 DOM 的虚拟 DOM。 请注意来自 React 的事件是如何合成事件的。 它们不是来自 DOM 的实际事件。 https://github.com/facebook/react/issues/1152

如果这是用于单元测试，请为滑块和文本创建一个单独的组件，并确保它们按预期执行，并通过 props 彼此分开。

有关如何专门测试范围滑块的更深入的文章，请查看https://blog.bitsrc.io/build-and-test-sliders-with-react-hooks-38aaa9422772

祝你好运！