使用 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

祝你好運！