Hago un código sobre la calculadora con React. Uso useRef para cambiar el valor de firstref y secondref, resultref. resultref.current se cambia correctamente en la consola. Pero en la página, resultref.current en la etiqueta de entrada no cambia en tiempo real. Quiero saber por qué sucede esto. ¿Es esto mi culpa?
import { useRef } from 'react'; const Calculator = () => { const firstref = useRef(0); const secondref = useRef(0); const resultref = useRef(0); const ClickChange = () => { resultref.current = Number(firstref.current) + Number(secondref.current); console.log(resultref.current) } return ( <div> <input type="text" ref={firstref} placeholder={firstref.current} onChange={ (e) => firstref.current = e.target.value} /> + <input type="text" ref={secondref} placeholder={secondref.current} onChange={ (e) => secondref.current = e.target.value} /> <input type="button" value="=" onClick={ClickChange} /> <input type="text" ref={resultref} placeholder={resultref.current} /> </div> ) } export default Calculatortodos los accesorios están trabajados. Lo comprobé en la consola.
ps quiero usar marcador de posición. pero si causa problemas, por favor diga por qué no funcionó.
El problema es que las ref no hacen que un componente React se vuelva a renderizar , lo que significa que la declaración de return no se "llama" nuevamente con los valores actualizados.
Para que funcione, debe usar el gancho useState() para mantener el resultado:
const Calculator = () => { const firstref = useRef(0); const secondref = useRef(0); const [result, setResult] = useState(0); const ClickChange = () => { setResult(Number(firstref.current) + Number(secondref.current)); } return ( <div> <input type="text" ref={firstref} placeholder={firstref.current} onChange={ (e) => firstref.current = e.target.value} /> + <input type="text" ref={secondref} placeholder={secondref.current} onChange={ (e) => secondref.current = e.target.value} /> <input type="button" value="=" onClick={ClickChange} /> <input type="text" placeholder={result} /> </div> ) } export default Calculator;Ahora, cada vez que haga clic en el botón "=", el estado de "resultado" cambia, lo que hará que React vuelva a renderizar el componente con el valor actualizado.
Tienes que establecer el valor de esta manera
resultref.current.value = Number(firstref.current) + Number(secondref.current);