Estoy usando la biblioteca MUI para crear mi aplicación React Js .
Aquí estoy usando el componente de campo de texto controlado para crear una interfaz de usuario de búsqueda simple.
Pero hay algo extraño. El componente Text Field pierde el foco después de cambiar su valor. Esta es la primera vez que me enfrento a este problema. Nunca me enfrenté a este problema antes.
¿Cómo pudo pasar esto? Y cual es la solución.
Aquí está el código y el patio de recreo: https://codesandbox.io/s/mui-autocomplete-lost-focus-oenoo ?
Nota: si elimino el breakpoint type de interrupción del código, el componente Text Field aún pierde el foco después de cambiar su valor.
Es porque está definiendo un componente dentro de otro componente, por lo que la definición del componente se recrea cada vez que el componente se procesa (y su componente se procesa cada vez que el usuario escribe en la entrada).
Dos soluciones:
No lo convierta en un componente separado. En vez de:
const MyComponent = () => { const MyInput = () => <div><input /></div>; // you get the idea return ( <div> <MyInput /> </div> ); };Hacer:
const MyComponent = () => { return ( <div> <div><input /></div>; // you get the idea </div> ); };Defina el componente fuera de su componente principal:
const MyInput = ({value, onChange}) => ( <div> <input value={value} onChange={onChange} /> </div> ); const MyComponent = () => { const [value, setValue] = useState(''); return ( <div> <MyInput value={value} onChange={event => setValue(event.target.value)} /> </div> ); };