在线计算器

import React, { useState } from 'react';

export default function App() {
  const [display, setDisplay] = useState('0');
  const [operator, setOperator] = useState(null);
  const [previousValue, setPreviousValue] = useState(null);
  const [waitingForOperand, setWaitingForOperand] = useState(false);

  const inputDigit = (digit) => {
    if (waitingForOperand) {
      setDisplay(String(digit));
      setWaitingForOperand(false);
    } else {
      setDisplay(display === '0' ? String(digit) : display + digit);
    }
  };

  const inputDecimal = () => {
    if (waitingForOperand) {
      setDisplay('0.');
      setWaitingForOperand(false);
      return;
    }
    if (display.indexOf('.') === -1) {
      setDisplay(display + '.');
    }
  };

  const clearAll = () => {
    setDisplay('0');
    setOperator(null);
    setPreviousValue(null);
    setWaitingForOperand(false);
  };

  const toggleSign = () => {
    const newValue = parseFloat(display) * -1;
    setDisplay(String(newValue));
  };

  const inputPercent = () => {
    const value = parseFloat(display);
    setDisplay(String(value / 100));
  };

  const performOperation = (nextOperator) => {
    const inputValue = parseFloat(display);

    if (previousValue == null) {
      setPreviousValue(inputValue);
    } else if (operator) {
      const currentValue = previousValue || 0;
      const newValue = calculate(currentValue, inputValue, operator);
      setDisplay(String(newValue));
      setPreviousValue(newValue);
    }

    setWaitingForOperand(true);
    setOperator(nextOperator);
  };

  const calculate = (a, b, op) => {
    switch (op) {
      case '+': return a + b;
      case '-': return a - b;
      case '×': return a * b;
      case '÷': return a / b;
      default: return b;
    }
  };

  const handleEqual = () => {
    const inputValue = parseFloat(display);
    if (previousValue != null && operator) {
      const newValue = calculate(previousValue, inputValue, operator);
      setDisplay(String(newValue));
      setPreviousValue(null);
      setOperator(null);
      setWaitingForOperand(true);
    }
  };

  return (
    <div className='calculator'>
      <div className='calculator-display'>{display}</div>
      <div className='calculator-keypad'>
        <button className='key key-clear' onClick={clearAll}>C</button>
        <button className='key key-sign' onClick={toggleSign}>±</button>
        <button className='key key-percent' onClick={inputPercent}>%</button>
        <button className='key key-operator' onClick={() => performOperation('÷')}>÷</button>
        <button className='key key-number' onClick={() => inputDigit(7)}>7</button>
        <button className='key key-number' onClick={() => inputDigit(8)}>8</button>
        <button className='key key-number' onClick={() => inputDigit(9)}>9</button>
        <button className='key key-operator' onClick={() => performOperation('×')}>×</button>
        <button className='key key-number' onClick={() => inputDigit(4)}>4</button>
        <button className='key key-number' onClick={() => inputDigit(5)}>5</button>
        <button className='key key-number' onClick={() => inputDigit(6)}>6</button>
        <button className='key key-operator' onClick={() => performOperation('-')}>-</button>
        <button className='key key-number' onClick={() => inputDigit(1)}>1</button>
        <button className='key key-number' onClick={() => inputDigit(2)}>2</button>
        <button className='key key-number' onClick={() => inputDigit(3)}>3</button>
        <button className='key key-operator' onClick={() => performOperation('+')}>+</button>
        <button className='key key-number key-zero' onClick={() => inputDigit(0)}>0</button>
        <button className='key key-decimal' onClick={inputDecimal}>.</button>
        <button className='key key-equals' onClick={handleEqual}>=</button>
      </div>
    </div>
  );
}