Quiero implementar useRef para que el componente en el que está mi etiqueta de entrada no se vuelva a representar en el cambio de valor. Si usamos useState, volverá a renderizar todo el componente en cada tecla presionada.
Así es como lo hacemos normalmente, pero esto volverá a renderizar todo el componente en cada cambio.
const [name, setName] = useState(''); return( <input type="text" placeholder="Name" value={name} onChange={e => setName(e.target.value)} /> )Quiero hacer esto usando useRef para evitarlo.
const name = useRef(""); const handleName = (e) => { name.current = e.target.value }; return( <input type="text" placeholder="Name" value={name.current.value} onChange={handleName} /> )pero no funciona por alguna razón?
Cambie su etiqueta de entrada a esto (dentro de JSX):
<input type="text" placeholder="Name" ref={name} onChange={handleName} /> En lugar de value={name.current.value} use ref={name} . Debería solucionar el problema.
Código completo:
import { useRef } from "react"; export default function App() { const name = useRef(''); const handleName = (e) => { name.current = e.target.value document.getElementById('test').innerText = name.current }; return( <> <input type="text" placeholder="Name" ref={name} onChange={handleName} /> <p id='test'></p> </> ) }si desea evitar la representación en el cambio, simplemente puede pasar ref al elemento de entrada. y cuando sea necesario, puede obtener el valor de ref como se usa en el método handleSubmit a continuación. El elemento de entrada HTML mantendrá su estado:
const nameRef = useRef(null); const handleSubmit = () => { console.log(nameRef.current.value); }; return( <input type="text" ref={nameRef} placeholder="Name" /> )