不使用Hooks的React类组件计算器加减乘除功能如何实现

核心计算方法替换 #

直接替换你的handleCalculate方法代码即可实现加减乘除运算，自带错误捕获处理非法输入场景：

handleCalculate(event){
  event.preventDefault();
  try {
    // 执行已拼接的算术表达式，计算结果转字符串存入state
    const res = eval(this.state.result).toString();
    this.setState({
      result: res
    });
  } catch (err) {
    // 非法表达式报错提示
    this.setState({
      result: "输入错误"
    });
    // 2秒后自动清空报错信息
    setTimeout(() => this.setState({result: ""}), 2000);
  }
}

现有代码bug修复 #

你当前渲染的按钮存在name属性和显示文本不匹配的问题，会导致输入值错误，需要修改：

• 原name为5的按钮显示文本为3，修改为：<button name="5" className="global" onClick={this.handleClick}>5</button>
• 原name为6的按钮显示文本为2，修改为：<button name="6" className="global" onClick={this.handleClick}>6</button>

可选优化说明 #

如果担心eval的安全风险，可以自行实现表达式解析逻辑：

• 用正则拆分当前result字符串，分离出数字数组和运算符数组
• 按照先乘除后加减的优先级遍历计算得到最终结果

内容的提问来源于stack exchange，提问作者John