I'm using a range input in my React application. I would like to log the value selected once the range slider has changed (not while it is changing). Here is an example of my issue:
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>If you view the browser console, the value is being logged as you slide the range slider. My desired output is so that the handleChange callback is only fired once you release the slider. I would like it to behave in a similar way that onChange behaves in vanilla HTML:
const handleChange = (e) => {
console.log(e.target.valueAsNumber);
}<input type="range" onChange="handleChange(event)"/>It seems like react has made onChange behave like onInput, which in my case is undesirable. Is there a simple prop that I'm missing to make this work? Or do I need to use refs or some other method to make this work as intentded?
The behaviour you want is of onchange event listener. Unfortunately, React connects onChange prop to oninput event handler.
There's also an active issue about this: https://github.com/facebook/react/issues/3964 Document how React's onChange relates to onInput #3964
Simple fix would be to use onchange event listener using ref.
const NewInput = (props) => {
const setRef = useCallback((e) => {
e.target.onchange = props.onChange || null;
}, [props.onChange]);
return <input ref={setRef} {...props} />
}
Another approach is discussed here: In React, what's the difference between onChange and onInput?