我正在尝试使用单击的运算符符号显示单击的数字，并在单击相等按钮时显示结果答案

【问题标题】：I am trying to display the clicked numbers with the clicked operator sign and show the result when ehe equal button is clicked我正在尝试使用单击的运算符符号显示单击的数字，并在单击相等按钮时显示结果
【发布时间】：2021-06-21 05:08:37
【问题描述】：

我的代码似乎只适用于仅添加两个数字，然后它就搞砸了。当我不断添加多个数字时它不起作用。我究竟做错了什么。我的计划是在显示屏上显示所有数字和操作员签名，并在单击等号按钮时显示结果。

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;

【问题讨论】：

标签： reactjs react-hooks

【解决方案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 来制作您想要的字符串。

【讨论】：