Блог

Это мой первый проект 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>
  );
}
  

Ну, я собрал грубую версию калькулятора только с операцией сложения, вам решать изучить ее и реализовать другие операции, это нормально?

Мой рабочий калькулятор только для сложения доступен в 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;

  

Я прокомментировал это, и, как вы можете видеть, самое большое улучшение касается управления состояниями, я использую три состояния:

• один для списка чисел / операций
• один, чтобы знать, когда я должен добавить элемент в список (a " " или число, следующее за a " " ) или когда я должен обновить последнее добавленное число (при 1 двойном нажатии предыдущее 1 должно стать 11 )
• один для результата

В любом случае, большая часть сложности связана с управлением списком чисел / операций: дайте мне знать, если комментариев недостаточно, чтобы понять, как это работает 😊