0
667
ViewsDesenfocar/borrar una entrada de interfaz de usuario de Material
Tengo un campo de entrada que se puede restablecer/borrar haciendo clic en un botón:
https://codesandbox.io/s/basictextfields-material-demo-forked-m1z5l?file=/demo.js:127-482
const searchInput = useRef(null); const clearInput = () => { searchInput.current.value = ''; searchInput.current.blur(); } return ( <div> <Input inputRef={searchInput} id="outlined-basic" label="Outlined" variant="outlined" /> <button onClick={clearInput}>Clear</button> </div> );El problema es que la etiqueta no se restablece a su posición original después de borrar la entrada. Supongo que porque el campo de entrada todavía cree que tiene el foco. Intenté agregar un desenfoque () pero eso no parece hacer nada.
3 answers
Answer question0
Esto no es de ninguna manera una solución elegante. Pero es lo que tengo para que funcione como tú querías
import React, {useRef, useState, } from 'react'; import Input from '@mui/material/TextField'; export default function BasicTextFields() { const searchInput = useRef(null); const [isFocused, setFocus] = useState(false); const clearInput = () => { searchInput.current.value = ''; searchInput.current.blur(); setInputFocus(false) } const setInputFocus = (state)=>{ const notEmpty = !!searchInput.current?.value; if(notEmpty) return setFocus(true) setFocus(state) } return ( <div> <Input inputRef={searchInput} id="outlined-basic" label="Outlined" InputLabelProps={{shrink: isFocused}} onFocus={()=>setInputFocus(true)} onBlur={()=>setInputFocus(false)} variant="outlined" /> <button onClick={clearInput}>Clear</button> </div> ); } 
0
Si lo que realmente desea es borrar el TextField programación, simplemente use el modo controlado y restablezca el estado del value cuando sea necesario. Ver no controlado-vs-controlado :
export default function BasicTextFields() { const [value, setValue] = useState(""); const clearInput = () => setValue(""); return ( <> <Input value={value} onChange={(e) => setValue(e.target.value)} label="Outlined" variant="outlined" /> <button onClick={clearInput}>Clear</button> </> ); }Demo en vivo
0
Puede usar inputProps para el evento catch onBlur.
<Input id="outlined-basic" label="Outlined" variant="outlined" inputProps={{ onBlur: () => { console.log('foo bar') } }}/> <button onClick={clearInput}>Clear</button>