React实现输入数学表达式并弹窗展示计算结果的代码修改需求

数据老陈

2026-8-16

解决React中数学表达式计算并弹窗展示结果的问题

现有代码的问题在于，只是直接弹窗显示输入内容，parseInt(name)仅能将输入转为整数，无法处理完整的数学表达式。要实现计算功能，可以通过eval()函数解析并执行表达式，同时加入输入合法性的错误处理。

修改要点：

重命名状态变量为expression，更贴合数学表达式的语义
在提交逻辑中用eval()计算表达式结果，通过try-catch捕获无效输入的错误
弹窗展示计算结果或错误提示，优化用户体验

修改后的完整代码：

import { useState } from "react";
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [expression, setExpression] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    try {
      // 计算输入的数学表达式
      const result = eval(expression);
      // 弹窗展示计算结果
      alert(`计算结果：${result}`);
      console.log(`输入表达式：${expression}，计算结果：${result}`);
    } catch (error) {
      // 处理无效表达式的情况
      alert("请输入有效的数学表达式");
      console.error("表达式计算错误：", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        输入数学表达式：
        <input 
          type="text" 
          value={expression}
          onChange={(e) => setExpression(e.target.value)}
          placeholder="例如：2+3-1"
        />
      </label>
      <input type="submit" value="计算" />
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm/>);