Question

以下是我的代码库的关键逻辑：

  addLogicToEquation(newLogic) {
    let equation = this.state.equation
    console.log(parseFloat(equation))

    if(newLogic==="10%"){
      let newEquation = Number(equation) + (Number(equation) * 0.10)
      console.log(newEquation)
      this.setState({equation: Number(newEquation).toFixed(2)})
    }else if (newLogic==="15%"){
      let newEquation = Number(equation) + (Number(equation) * 0.15)
      console.log(newEquation)
      this.setState({equation: Number(newEquation).toFixed(2)})
    }else if (newLogic==="20%"){
      let newEquation = Number(equation) + (Number(equation) * 0.20)
      console.log(newEquation)
      this.setState({equation: Number(newEquation).toFixed(2)})
    }
    else{
      // we're adding more numbers
      let newEquation = equation + newLogic
      this.setState({equation: Number(newEquation).toFixed(2)})
    }

  }

出于某种原因，我无法理解，如果我连续三次输入6，我会得到此输出：

与666相反，这实际上是我想要的。这是什么解决方案？

我已尝试使用parseFloat()，正如您所见 - 但它似乎没有效果。

this.state.equation的示例：

编辑：

编辑II：

import React, { Component, PropTypes } from 'react';

export default class ButtonNumber extends Component {
  render() {
    const { number, addLogicToEquation, evalEquation } = this.props
    const numberClass = " btn btn-number-" + number

    //maybe you should put a big switch statement here
    //turning those into numbers?

    let inputNumber = Number(0)

    switch (number) {
        case number === "0":
            inputNumber = Number(0)
        case number === "1":
            inputNumber = Number(1)
        case number === "2":
            inputNumber = Number(2)
        case number === "3":
            inputNumber = Number(3)            
        case number === "4":
            inputNumber = Number(4)            
        case number === "5":
            inputNumber = Number(5)            
        case number === "6":
            inputNumber = Number(6)
        case number === "7":
            inputNumber = Number(7)            
        case number === "8":
            inputNumber = Number(8)            
        case number === "9":
            inputNumber = Number(9) 
    }           

    return (
      <button className={numberClass} onClick={() => {addLogicToEquation(number)}}>
        {number}
      </button>
    )
  }
}

Answer 1

试试这个。我的代码的主要区别是我使用类型强制来确保数字是字符串和仲裁。另外，我对你的百分比有不同的逻辑。它并不需要成为一个巨大的条件。另外，我已经重命名了变量。你的变量名真的很具欺骗性。您创建了新的计算值，而非方程式

addLogicToEquation(newLogic) {
  let newValue, multiplier
  let equation = this.state.equation
  if (newLogic.includes("%")) {
    multiplier = parseFloat(newLogic.replace("%","")) / 100.0
    newValue = parseFloat(equation) + parseFloat(equation) * multiplier 
  } else {
    newValue = parseFloat('' + parseFloat(equation) + newLogic)
  }
  this.setState({equation: newValue.toFixed(2)})
}

Answer 2

实际上，问题是当你输入第二个6时，你将“6.00”字符串值连接到“6”。因此它变为“6.006”并且toFixed(2)将其四舍五入为6.01。为了避免这种情况，请在连接时删除“.00”部分。

let newEquation = Number(equation) + newLogic;

在React，字符串转换，状态表示中递增浮点数

2 个答案: