React中的float增量，字符串转换，状态表示 [英] Increment float in React, string conversion, state representation

问题描述

这是我的代码库的关键逻辑:

Here is the critical logic of my codebase:

  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，则会得到以下输出:

For some reason I can't understand, if I enter three consecutive 6's, I get this output:

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

As opposed to 666, which is what I want in fact. What is a solution to this?

如您所见，我已经尝试使用parseFloat()，但这似乎没有任何效果.

I've tried to use parseFloat(), as you can see- but it had seemingly no effect.

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>
    )
  }
}

推荐答案

尝试一下.我的代码的关键区别是我使用类型强制来确保数字是字符串和简洁的.另外，对于您的百分比，我有一套不同的逻辑.它实际上并不需要成为一个巨大的条件.另外，我已经重命名了变量.您的变量名确实具有欺骗性.您要创建新的计算值，而不是方程式

Try this. The key difference for my code is I use type coercion to ensure the numbers are strings and concated. Also, I have a different set of logic for your percentage. It doesn't really need to be a huge conditional. Also, I have renamed variables. Your variable names are really deceptive. You're create new calculation values, not equations

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)})
}

这篇关于React中的float增量，字符串转换，状态表示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！