Tengo una entrada MUI TextField , que quiero hacer algo cuando cambia, sin impedir su manejo nativo (sin hacer que sea una entrada controlada)
<TextField onChange={(e)=>{ something(e.target.value) //maybe continueDefault() to make it still accept input }}/> ¿Cómo puedo hacer que continúe con su acción predeterminada, que es permitirle recibir y agregar entradas de texto después de invocar mi función something() con los datos?
Quería permitir esto sin tener que hacer que la entrada sea una controlled input , que es sin usar un state para almacenar su valor.
¿Has probado tu solución actual? Pasar solo la propiedad onChange sin el value no lo convierte en un componente controlado, que es lo que desea. Tampoco hay razón para usar el hipotético continueDefault() , ya que nunca se llama a e.preventDefault() .
Su solución actual parece funcionar bien y no impide que el campo de texto se siga editando.
function something(value) { console.log(JSON.stringify(value)); } function App() { return ( <MaterialUI.TextField onChange={(e) => { something(e.target.value); }} /> ); } const root = ReactDOM.createRoot(document.querySelector("#root")); root.render(<App />); <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script crossorigin src="https://unpkg.com/@mui/material@5/umd/material-ui.development.js"></script> <div id="root"></div>Creo que deberías usar una referencia, un anuncio y un controlador de eventos. Algo así (no probado)
const MyComponent = () => { const ref = useRef(); useEffect(() => { const onChange = () => { something(ref.current.value) } ref.current.addEventListerner("change", onChange) return () => { ref.current.removeEventListener("change", onChange) } }) return ( <input ref={ref} /> ) } const ref = useRef(); useEffect(() => { const onChange = () => { something(ref.current.value) } ref.current.addEventListerner("change", onChange) return () => ref.current.removeEventListener("change", onChange) }) return ( <input ref={ref} /> ) }