React计算器选择运算符后如何获取下一个值？技术求助

嘿，我看你在React计算器的运算符逻辑上卡壳了，这其实是很多新手做计算器都会遇到的点——只要理清「前值」「当前值」「运算符」这几个状态的切换逻辑，问题就迎刃而解了！

你的现有代码里已经定义了previousvalue和nextvalue，但缺少一个关键的状态标记：是否已经选择了运算符，需要开始输入下一个值。咱们可以给state加一个isWaitingForNextValue的布尔值，再加上operator来存储当前选中的运算符号，这样就能区分“输入前值”和“输入后值”两个阶段了。

修改后的完整代码片段 #

constructor(props) {
  super(props);
  this.state = {
    value: '0',
    previousvalue: '',
    operator: '',
    isWaitingForNextValue: false // 标记是否要开始输入下一个值
  };
  this.handleclick = this.handleclick.bind(this);
  this.operation = this.operation.bind(this);
  this.calculate = this.calculate.bind(this); // 新增计算结果的方法
}

handleclick(digit) {
  const { value, isWaitingForNextValue } = this.state;

  // 处理00的情况：如果当前是0，点击00还是0；否则拼接00
  if (digit === '00') {
    if (value === '0' || isWaitingForNextValue) {
      this.setState({ value: '0', isWaitingForNextValue: false });
    } else {
      this.setState({ value: value + digit });
    }
    return;
  }

  // 如果已经选了运算符，下一次点击数字直接替换当前值，开始输入后值
  if (isWaitingForNextValue) {
    this.setState({
      value: String(digit),
      isWaitingForNextValue: false
    });
  } else {
    // 正常输入数字：如果当前是0，替换成新数字；否则拼接
    this.setState({
      value: value === '0' ? String(digit) : value + digit
    });
  }
}

operation(op) {
  const { value } = this.state;
  // 点击运算符时，把当前值存为前值，记录运算符，标记等待下一个值
  this.setState({
    previousvalue: value,
    operator: op,
    isWaitingForNextValue: true
  });
}

calculate() {
  const { previousvalue, value, operator } = this.state;
  let result = 0;
  const prevNum = parseFloat(previousvalue);
  const currNum = parseFloat(value);

  switch (operator) {
    case '+':
      result = prevNum + currNum;
      break;
    case '-':
      result = prevNum - currNum;
      break;
    case '*':
      result = prevNum * currNum;
      break;
    case '/':
      result = prevNum / currNum;
      break;
    default:
      return;
  }

  // 计算完成后更新状态，重置标记
  this.setState({
    value: String(result),
    previousvalue: '',
    operator: '',
    isWaitingForNextValue: false
  });
}

关键逻辑说明 #

• isWaitingForNextValue的作用：当你点击运算符后，这个状态会变成true，下一次点击数字时就会直接覆盖当前的value，而不是拼接，这样就实现了“开始输入下一个值”的效果。
• operation函数：负责存储前值和选中的运算符，同时切换等待状态，为输入下一个值做准备。
• calculate函数：当点击等号时，用存储的前值、运算符和当前值进行计算，然后更新结果到value中。

你可以把这个逻辑整合到你的代码里，先测试一下运算符切换和输入下一个值的流程，要是还有计算精度或者其他细节问题，再调整就好啦～

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