Estoy creando una aplicación en React con muchas formas complejas y estoy tratando de usar el controlador de eventos onChange en el elemento <form> .
<form onChange={handleChange}> <input name="input1" /> <input name="input2" /> ... </form> Esto funciona muy bien cuando se escuchan cambios de entradas HTML normales, pero cuando se crea un <CustomInput> , tengo problemas para activar onChange en el <form> .
Creé una <input> "oculta" y despaché manualmente un Event("change") , pero onChange no lo recogió en el <form> , sin embargo, funciona para la entrada <select> .
import { useRef } from "react"; function App() { const inpRef = useRef(); const selRef = useRef(); function onChange(e) { console.log(e.target.name); // Only "select" is logged } function dispatchChange() { inpRef.current.dispatchEvent(new Event("change", { bubbles: true })); selRef.current.dispatchEvent(new Event("change", { bubbles: true })); } return ( <> <form onChange={onChange}> <input ref={inpRef} name="input" /> <select ref={selRef} name="select" /> </form> <button onClick={dispatchChange}>Trigger change</button> </> ); } export default App; ¿Por qué el evento "cambiar" para <select> activa onChange, pero no <input> ?
Este problema ocurre porque el "evento de cambio" de la entrada es bastante especial. Es administrado por "ChangeEventPlugin".
Una de las restricciones de este complemento es que el evento de "cambio" solo se enviará si el valor de entrada realmente cambia.
Para resolver el problema, debe agregar esto en su código:
useEffect(() => { inpRef.current._valueTracker.getValue = () => { return 'fake value' } }, []);E importar "useEffect", por supuesto.
import { useEffect, useRef } from 'react';Entonces, al final, el código completo será:
import { useEffect, useRef } from 'react'; function App() { const inpRef = useRef(); const selRef = useRef(); function onChange(e) { console.log(e.target.name); // Only "select" is logged } function dispatchChange() { inpRef.current.dispatchEvent(new Event("change", { bubbles: true })); selRef.current.dispatchEvent(new Event("change", { bubbles: true })); } useEffect(() => { inpRef.current._valueTracker.getValue = () => { return 'fake value' } }, []); return ( <> <form onChange={onChange}> <input ref={inpRef} name="input" /> <select ref={selRef} name="select" /> </form> <button onClick={dispatchChange}>Trigger change</button> </> ); } export default App;Espero haberte ayudado. ¡Que tengas un buen día y feliz año nuevo!