使用react实现简易计算器

下面是一个简单的计算器示例，使用 React 实现：

import React, { useState } from 'react';

function Calculator() {
  const [result, setResult] = useState('');

  function handleClick(event) {
    setResult(result.concat(event.target.name));
  }

  function calculate() {
    try {
      setResult(eval(result).toString());
    } catch (error) {
      setResult('Error');
    }
  }

  function clear() {
    setResult('');
  }

  return (
    <div className="calculator">
      <input type="text" value={result} />
      <div className="keys">
        <button name="1" onClick={handleClick}>1</button>
        <button name="2" onClick={handleClick}>2</button>
        <button name="3" onClick={handleClick}>3</button>
        <button name="+" onClick={handleClick}>+</button>
        <button name="4" onClick={handleClick}>4</button>
        <button name="5" onClick={handleClick}>5</button>
        <button name="6" onClick={handleClick}>6</button>
        <button name="-" onClick={handleClick}>-</button>
        <button name="7" onClick={handleClick}>7</button>
        <button name="8" onClick={handleClick}>8</button>
        <button name="9" onClick={handleClick}>9</button>
        <button name="*" onClick={handleClick}>*</button>
        <button name="." onClick={handleClick}>.</button>
        <button name="0" onClick={handleClick}>0</button>
        <button name="/" onClick={handleClick}>/</button>
        <button className="clear" onClick={clear}>Clear</button>
        <button className="equal" onClick={calculate}>=</button>
      </div>
    </div>
  );
}

export default Calculator;

在这个计算器中，我们使用了 React 的 `useState` 钩子来管理结果的状态。当用户按下数字或运算符按钮时，我们将其添加到结果字符串中。当用户按下“Clear”按钮时，我们将结果字符串设置为空字符串。当用户按下“=”按钮时，我们使用 `eval()` 函数计算结果，并将其设置为结果字符串。

这个简单的计算器可以通过 CSS 来美化和布局，以使其看起来更像一个实际的计算器。