Question

这是我的第一个带有钩子的react项目。我知道代码很乱，但是我只想先了解要点，然后在完成后再组织代码。但是我有一个正在构建的计算器应用程序，需要状态方面的帮助。我有两种状态，需要显示答案的帮助。数字按钮可以工作，但是我无法弄清楚加，减等功能按钮的代码。

使用

尝试了一个示例

handleMultiplication(e){
setNumber(math(number * 2)

可以，但是我希望能够输入另一个数字并按下等号，然后显示答案。

function Calculator() {
  const [number, setNumber] = useState('');
  const [answer, setAnswer] = useState('')
  return (
    <div>
      <div>
        <input value={number} readOnly />
        <input value={answer} readOnly />
      </div>
      <div>
        <button onClick={() => setNumber([])} label="AC" value="clear">
          AC
        </button>
        <button
          onClick={() => handleClick()}
          label="+-"
          value="positivenegative"
        >
          +-
        </button>
        <button onClick={() => handlePercentage()} value="percentage">
          %
        </button>
        <button onClick={() => handleDivision()} value="division">
          /
        </button>
      </div>
      <div>
        <button onClick={() => setNumber(number + 7)} value="7">
          7
        </button>
        <button onClick={() => setNumber(number + 8)} value="8">
          8
        </button>
        <button onClick={() => setNumber(number + 9)}value="9">
          9
        </button>
        <button onClick={() => handleMultiplication()} value="multiplication">
          *
        </button>
      </div>
      <div>
        <button onClick={() => setNumber(number + 6)} value="6">
          6
        </button>
        <button onClick={() => setNumber(number + 5)} value="5">
          5
        </button>
        <button onClick={() => setNumber(number + 4)} value="4">
          4
        </button>
        <button onClick={() => handleSubtraction()} value="subtraction">
          -
        </button>
      </div>
      <div>
        <button onClick={() => setNumber(number + 3)} value="3">
          3
        </button>
        <button onClick={() => setNumber(number + 2)} value="2">
          2
        </button>
        <button onClick={() => setNumber(number + 1)} value="1">
          1
        </button>
        <button onClick={() => handleAddition()} value="addition">
          +
        </button>
      </div>
      <div>
        <button onClick={() => setNumber(number + 0)} label="0" value="0">
          0
        </button>
        <button onClick={() => handleClick()} label="." value="decimal">
          .
        </button>
        <button onClick={() => handleClick()} label="=" value="equal">
          =
        </button>
      </div>
    </div>
  );
}

Answer 1

好吧，我只用加法运算就组装了一个粗略的计算器版本，这取决于您学习并实现其他运算，可以吗？

我的工作加法计算器是available on CodeSandbox，我从您的代码开始，删除了一些按钮。

注意：这只是实现计算器的一种方法（不是100％的最佳方法），但是为您提供有关它的完整教程不在我的讨论范围之内。

那是我的代码

import React from "react";

function Calculator() {
  // the list will be an array of numbers and operators, ex. [10, "+", 5]
  const [list, setList] = React.useState([]);
  // when append is set to true, a new element is pushed to the list,
  // when it's set to false it means that it must change the last number
  const [append, setAppend] = React.useState(true);
  // the result at the last "=" button click
  const [result, setResult] = React.useState();
  // for the "AC" click
  const reset = () => {
    setList([]);
    setAppend(true);
  };

  // every number and operator click must invoke this callback
  const appendItem = item => {
    // the original list isn't mutated
    let newList = [...list];
    // if the user clicked a number button...
    if (typeof item === "number") {
      let number = item;
      if (append) {
        // the number is appended to the list
        newList.push(item);
        setAppend(false);
      } else {
        // the last aded number must be updated
        number = newList[newList.length - 1];
        number = number * 10 + item;
        newList[newList.length - 1] = number;
      }
      setList(newList);
    } else {
      // the operator must be appended...
      setList([...list, item]);
      // ... and the next number too
      setAppend(true);
    }
  };
  const calculateResult = () => {
    const result = list.reduce((acc, item, i, array) => {
      if (typeof item === "number") {
        if (i === 0) {
          return item;
        } else {
          const operator = array[i - 1];
          switch (operator) {
            case "+":
              return acc + item;
            default:
              return acc;
          }
        }
      }
      return acc;
    }, 0);
    setResult(result);
  };

  return (
    <div>
      <div>
        <input value={list.join("")} readOnly />
        <input value={result} readOnly />
      </div>
      <div>
        <button onClick={reset} label="AC" value="clear">
          AC
        </button>
      </div>
      <div>
        <button onClick={() => appendItem(7)} value="7">
          7
        </button>
        <button onClick={() => appendItem(8)} value="8">
          8
        </button>
        <button onClick={() => appendItem(9)} value="9">
          9
        </button>
      </div>
      <div>
        <button onClick={() => appendItem(6)} value="6">
          6
        </button>
        <button onClick={() => appendItem(5)} value="5">
          5
        </button>
        <button onClick={() => appendItem(4)} value="4">
          4
        </button>
      </div>
      <div>
        <button onClick={() => appendItem(3)} value="3">
          3
        </button>
        <button onClick={() => appendItem(2)} value="2">
          2
        </button>
        <button onClick={() => appendItem(1)} value="1">
          1
        </button>
        <button onClick={() => appendItem("+")} value="addition">
          +
        </button>
      </div>
      <div>
        <button onClick={() => appendItem(0)} label="0" value="0">
          0
        </button>
        <button onClick={() => calculateResult()} label="=" value="equal">
          =
        </button>
      </div>
    </div>
  );
}

export default Calculator;

我对此进行了评论，如您所见，最大的改进是关于状态管理，我使用了三种状态：

一个数字/操作列表
一个人知道我何时应该将该项目添加到列表中（"+"或"+"之后的数字），或者何时更新更新的最后一个数字（按{{ 1}}两次，前一个1应该变成1）
一个代表结果

无论如何，大多数复杂性都来自于管理号码/操作的列表：让我知道注释是否不足以理解其工作原理

我如何在React JS计算器上向我的加减法按钮添加功能

1 个答案: