如何使 onChange 仅在 React 中的值更改后触发

Question

我在我的 React 应用程序中使用范围输入。我想在范围滑块更改后（而不是在更改时）记录所选的值。这是我的问题的示例：

const App = () => {
  const handleChange = (e) => {
    console.log(e.target.valueAsNumber);
  }
  return <input type="range" onChange={handleChange}/>
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

如果您查看浏览器控制台，则会在您滑动范围滑块时记录该值。我想要的输出是 handleChange 回调仅在您释放滑块后触发。我希望它的行为方式与 onChange 在 vanilla HTML:

中的行为方式类似

const handleChange = (e) => {
  console.log(e.target.valueAsNumber);
}

<input type="range" onChange="handleChange(event)"/>

似乎 React 使 onChange 表现得像 onInput，这在我的情况下是不可取的。我缺少一个简单的道具来完成这项工作吗？或者我是否需要使用 refs 或其他一些方法来使它按预期工作？

Answer 1

您想要的行为属于 onchange event listener. Unfortunately, React connects onChange prop to oninput 事件处理程序。

还有一个与此相关的活跃问题：https://github.com/facebook/react/issues/3964 Document how React's onChange relates to onInput #3964

简单的解决方法是使用 ref.

来使用 onchange 事件侦听器

const NewInput = (props) => {
  const setRef = useCallback((e) => {
    e.target.onchange = props.onChange || null;
  }, [props.onChange]);
  return <input ref={setRef} {...props} />
}

这里讨论另一种方法：

如何使 onChange 仅在 React 中的值更改后触发

How to make onChange only fire once value is changed in React

javascript

onchange

reactjs