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.
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.
You have to set the value like this
resultref.current.value = Number(firstref.current) + Number(secondref.current);