Как я могу добавить функциональность к моим кнопкам сложения, вычитания и т. Д. На калькуляторе реагирования js - PullRequest
Новая
       16

Как я могу добавить функциональность к моим кнопкам сложения, вычитания и т. Д. На калькуляторе реагирования js

0 голосов
/ 24 апреля 2019

Это мой первый реагирующий проект с крючками. Я знаю, что код грязный, но я просто хочу сначала понять суть, а затем организовать код позже, когда он будет завершен. Но у меня есть приложение-калькулятор, которое я создаю, и мне нужна помощь с состоянием. У меня есть два состояния, и мне нужна помощь для отображения ответа. Цифровые кнопки работают, но я не могу понять код для функциональных кнопок, таких как сложение, вычитание и т. Д.

попробовал пример с 

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>
  );
}

1 Ответ

0 голосов
/ 30 апреля 2019

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

Мой рабочий калькулятор, работающий только на сложении, доступно на 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 должен стать 11)
  • один для результата

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

...