Estoy usando una entrada de rango en mi aplicación React. Me gustaría registrar el valor seleccionado una vez que el control deslizante de rango haya cambiado (no mientras está cambiando). Aquí hay un ejemplo de mi problema:
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> Si ve la consola del navegador, el valor se registra a medida que desliza el control deslizante de rango. Mi resultado deseado es que la devolución de llamada handleChange solo se active una vez que suelte el control deslizante. Me gustaría que se comportara de manera similar a como se comporta onChange en HTML estándar:
const handleChange = (e) => { console.log(e.target.valueAsNumber); } <input type="range" onChange="handleChange(event)"/> Parece que react ha hecho onChange se comporte como onInput , lo que en mi caso no es deseable. ¿Hay un accesorio simple que me falta para que esto funcione? ¿O necesito usar referencias o algún otro método para que esto funcione según lo previsto?
El comportamiento que desea es el de un detector de eventos onchange . Desafortunadamente, React conecta onChange prop al controlador de eventos oninput .
También hay un problema activo sobre esto: https://github.com/facebook/react/issues/3964 Documente cómo se relaciona onChange de React con onInput #3964
La solución simple sería usar el detector de eventos onchange usando ref.
const NewInput = (props) => { const setRef = useCallback((e) => { e.target.onchange = props.onChange || null; }, [props.onChange]); return <input ref={setRef} {...props} /> }Aquí se analiza otro enfoque: en React, ¿cuál es la diferencia entre onChange y onInput?