React计算器开发问题：如何设置操作数与运算符并实现计算？

嘿，我来帮你搞定这个React计算器的状态瓶颈！咱们先把每个状态字段的职责捋清楚，再一步步修改函数逻辑。

第一步：明确各状态字段的作用 #

你的状态结构没问题，先明确每个字段的分工：

• value：计算器屏幕上当前显示的内容
• operation：用户选中的运算符（比如+、-、*、/）
• previousvalue：第一个操作数（点击运算符前输入的数字）
• nextvalue：第二个操作数（点击运算符后输入的数字）

第二步：完善operation函数逻辑 #

当用户点击运算符时，核心逻辑是把当前显示的数字存为第一个操作数，记录运算符，然后清空屏幕准备输入第二个数。还要处理连续点击运算符的情况（比如先点+再点*，直接更新运算符就行）：

operation(operator) {
  console.log('operator coming', operator);
  
  // 如果已经有第一个操作数，且用户连续点运算符，直接更新运算符
  if (this.state.previousvalue) {
    this.setState({ operation: operator });
    return;
  }

  // 把当前显示的数字存为previousvalue，清空当前显示为'0'，记录运算符
  this.setState({
    previousvalue: this.state.value,
    operation: operator,
    value: '0',
    nextvalue: ''
  });
}

第三步：补充**关键！**数字输入函数 #

你还需要一个处理数字输入的函数，用来更新value和nextvalue：

handleNumberInput(num) {
  const { value, operation, nextvalue } = this.state;
  
  // 如果还没选运算符，直接更新屏幕显示的value
  if (!operation) {
    const newVal = value === '0' ? num : value + num;
    this.setState({ value: newVal });
  } else {
    // 已经选了运算符，更新nextvalue和屏幕显示
    const newNextVal = nextvalue === '' ? num : nextvalue + num;
    this.setState({
      nextvalue: newNextVal,
      value: newNextVal
    });
  }
}

第四步：添加计算结果的函数 #

当用户点击等于号时，根据previousvalue、operation、nextvalue计算结果，同时处理一些异常情况：

calculate() {
  const { previousvalue, operation, nextvalue } = this.state;
  
  // 缺少必要参数时不计算
  if (!previousvalue || !nextvalue || !operation) return;
  
  let result;
  
  // 转成数字类型
  const prevNum = parseFloat(previousvalue);
  const nextNum = parseFloat(nextvalue);

  switch(operation) {
    case '+':
      result = prevNum + nextNum;
      break;
    case '-':
      result = prevNum - nextNum;
      break;
    case '*':
      result = prevNum * nextNum;
      break;
    case '/':
      // 处理除数为0的错误情况
      result = nextNum === 0 ? 'Error' : prevNum / nextNum;
      break;
    default:
      result = 0;
  }

  // 更新状态：显示结果，清空其他字段以便下次计算
  this.setState({
    value: result.toString(),
    operation: '',
    previousvalue: '',
    nextvalue: ''
  });
}

测试流程示例 #

1. 用户输入5 → value变成'5'，previousvalue和nextvalue为空
2. 用户点击+ → previousvalue设为'5'，operation设为'+'，value变回'0'
3. 用户输入3 → nextvalue变成'3'，value显示'3'
4. 用户点击= → 计算5+3，value显示'8'，其他字段清空

这样就能完美管理前一个数、后一个数和运算符的状态啦！

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