• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

164
Vistas
why input value don't change in real time

I make a code about calculator with React. I use useRef for change value about firstref and secondref, resultref. resultref.current is correctly changed in console. But in the page, resultref.current in input tag don't change in real time. I want to know why this is happen. Is this my fault?

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 Calculator

every props are worked. I checked it in the conosole.

p.s I want to use placeholder. but if it makes problem, please say why it isn't worked.

about 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The issue is that refs do not cause a React component to re-render, which means that the return statement is not "called" again with the updated values.

In order to make it work, you should use the useState() hook to hold the result:

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;

So now, whenever you click on the "=" button, the state of "result" changes, which will cause React to render the component again with the updated value.

about 3 years ago · Juan Pablo Isaza Denunciar

0

You have to set the value like this

 resultref.current.value = Number(firstref.current) + Number(secondref.current);
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda