why input value don't change in real time-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

You have to set the value like this

 resultref.current.value = Number(firstref.current)   Number(secondref.current);