export default function Calculator(props){
const [userInput, setUserInput] = useState('')
const [operator,setOperator]= useState('')
const [equationNumbers,setEquationNumbers] = useState([])
const [result, setResult]= useState(0)
/* updating the input field as soon as user type anything */
function handleOnChange(e){
if(isNaN(e.target.value)){
document.getElementById('Calculator-input-field').placeholder='sorry, you can only type numbers';
clearAllData()
}else{
setUserInput(e.target.value)
document.getElementById('Calculator-input-field').placeholder='Enter the number';
}
}
/* clear all the data */
function clearAllData(){
setEquationNumbers([])
setOperator('')
setUserInput('')
}
/** Handle error functions */
/** handle pressing on operation and the input field is clear */
function repeatPressingOperation(ErrorMessage){
let ErrorSpan = document.getElementById('error');
try{
if(userInput === ''){clearAllData(); throw ErrorMessage};
}catch(err){
ErrorSpan.innerHTML = err;
};
}
/* doing the operation + - * / to the result array element */
function Calculate(operator){
/* if user want to do add operation */
if (operator === '+'){
setResult(equationNumbers[0] + equationNumbers[1])
setUserInput(result)
}
}
/* handle operation either on keyBoard or calculator bad */
function handleAddingOperation(e){
e.preventDefault()
repeatPressingOperation('if you want possitive number, use plaeas the switch button')
setOperator('+')
// equationNumbers.push(Number(userInput))
let NewNum = [Number(userInput)]
setEquationNumbers(NewNum)
console.log(NewNum)
setUserInput('')
}
function handlePressingEnterKeyOrEquallButton(e){
e.preventDefault()
repeatPressingOperation('you did not enter any number please try again')
let NewNum = [
...equationNumbers,
Number(userInput)
]
setEquationNumbers([
...NewNum,
Number(userInput)
])
setUserInput('')
console.log(NewNum)
console.log(equationNumbers)
Calculate(operator)
clearAllData()
}
/* handle the user input inside the input field and doing operations such:+, - , /.*/
function handleKeyDown(e){
if(e.key === '+'){
handleAddingOperation(e)
}
else if(e.key === 'Enter'){
handlePressingEnterKeyOrEquallButton(e)
}
}
我尝试使用 NewNum 数组“equationNumbers 的副本”然后使用 ... 方法更新 equationNumbers 状态,但是当我使用 console.log 时。当它应该有两个“用户按+时的第一个输入和按回车键时的第二个用户输入”时,它只显示一个索引“userinput”。所以我是通过推送方法来做的,但我知道这不好,因为它会改变状态。