Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

63
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.

8 months 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.

8 months ago · Juan Pablo Isaza Denunciar

0

You have to set the value like this

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