如何使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在香草HTML中的行为:

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

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

似乎反应已经使onChange的行为像onInput，这在我的情况下是不希望的。有没有什么简单的道具是我缺少的?或者我是否需要使用refs或其他方法来使此工作如期进行?

Answer 1

您想要的行为是onchange事件监听器。不幸的是，React将onChange prop连接到oninput事件处理器。

这也是一个活跃的问题:https://github.com/facebook/react/issues/3964文档如何React的onChange与onInput #3964相关

简单的修复方法是使用ref.

使用onchange事件监听器。

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

这里讨论了另一种方法:在React中，onChange和onInput的区别是什么?