我试图用点击的运算符符号显示点击的数字，并在点击相等按钮时显示结果

Question

我的代码似乎只需要加两个数字就可以了，之后就乱了。当我不断添加多个数字时，它不起作用。我做错了什么。我的计划是在显示器上显示所有数字和操作员签名，并在单击相等按钮时显示结果。

import React, {useState} from 'react';
import './App.css';
function Calculator() {
const [input, setInput] = useState('')
const [displayInput, setDisplayInput] = useState('')
const [operator, setOperator] = useState('')
const [currentNumber, setCurrentNumber] = useState('')
const [previousNumber, setPreviousNumber] = useState('')
function handleNumber(e){
setCurrentNumber(currentNumber + e.target.value)
setInput(currentNumber + e.target.value)
setDisplayInput(input + e.target.value)
}
function handleOperator(e){
console.log("-----Operator-----")
if(currentNumber === '') return
if(previousNumber !== ''){
console.log("****checked******")
handleCalculation()      
}
setOperator(e.target.value)
setPreviousNumber(currentNumber)
setInput(previousNumber + e.target.value)
setDisplayInput(input + e.target.value)
setInput('')
setCurrentNumber('')
}
function handleCalculation(){
if (operator === '+'){
setDisplayInput(parseFloat(previousNumber) + parseFloat(currentNumber))
}
setCurrentNumber(parseFloat(previousNumber) + parseFloat(currentNumber))
setOperator('')
setPreviousNumber('')
setInput('')
}
return (
<div>
<div>
<p>{displayInput}</p>
</div>
<button value = {1} onClick = {handleNumber}>1</button>
<button value = {2} onClick = {handleNumber}>2</button>
<button value = {3} onClick = {handleNumber}>3</button>
<button value = {'='} onClick = {handleCalculation}>=</button>
<button value = {'+'} onClick = {handleOperator}>+</button>

</div>
);
}
export default Calculator;

Answer 1

每次执行任何操作时，您当前都在重置displayInput。

我建议进行以下修复：在您的handleNumber上：
setDisplayInput(input + e.target.value)必须成为
setDisplayInput(prevDisplay => prevDisplay + e.target.value)

在您的handleOperator上：
setDisplayInput(input + e.target.value)变为
setDisplayInput(prevDisplay => prevDisplay + e.target.value)。

这是因为每次单击运算符时都会重置input状态变量，这样您就可以使用displayInput变量的previousState使字符串成为您想要的样子。