react js计算器有问题

Question

当我添加两个值时，它给了我正确的答案，例如 12+12=24 但之后我尝试添加另一个值，例如 13 它在第二个数字中添加 1 24+1=25,25+3=28 同样的问题减法

import React, { Component } from 'react';


export default class Calculator extends Component {
constructor(props)
{
    super(props)
    {
            this.state={
                value:'0',
                firstValue:0,
                operation:'',
                previousvalue:'',
                nextvalue:'',
                counter:0,
                subcounter:0,
                showingTemporaryResult:false,
                newAnswere:'',
                updateValue:''
            }
    };
    this.handleclick=this.handleclick.bind(this);
    this.operation=this.operation.bind(this);
    this.cleardisplay=this.cleardisplay.bind(this);
    this.dot=this.dot.bind(this);
    this.changesign=this.changesign.bind(this);
    this.percent=this.percent.bind(this);


}

handleclick(digit)
{    
    if(this.state.showingTemporaryResult) {
        //console.log("TRUE CALLED");
        this.setState({value:String(digit),showingTemporaryResult:false})
    }
    else {
        console.log("ELSE CALLED");
        this.setState({value:this.state.value==='0'?String(digit):this.state.value + digit});
    }


   // console.log('helo click fire',this.state.value);

}
operation(operator)
{
    console.log('operator coming',operator);
    this.setState({operation:operator});
    if(operator==='+'||operator==='-')
    {
       // this.setState({operation:operator},()=>{console.log('setting immidiate state',this.state.operation)});

        if(this.state.operation === '+') {
            console.log("are u coming");
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value ',firstValue);
            console.log('chcking second value ',secondValue);

            let sum = secondValue+firstValue;
            console.log('chcking sum value ',sum);

            this.setState({firstValue:sum,secondValue:'',showingTemporaryResult:true,newAnswere:''},
            ()=>{console.log('first',this.state.firstValue,'second',this.state.secondValue,
            'value===',this.state.value)});
            //console.log('somthing here ');

        }
       else if(this.state.operation === '-') {
            console.log("something coming");
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value ',this.state.firstValue);
            console.log('chcking second value ',secondValue);

            let subanswer = firstValue-secondValue;
            console.log('chcking sum value ',this.state.subanswer);

            this.setState({firstValue:subanswer,secondValue:'',showingTemporaryResult:true},
            ()=>{console.log('first',this.state.firstValue,'second',this.state.secondValue,
            'value===',this.state.value)});
            //console.log('somthing here ');

        }
        else if (this.state.operation === '') {
            let firstValue = parseInt(this.state.value);
            this.setState({firstValue});

            this.setState({value:'',operation:operator},()=>{console.log('here is operation setting',this.state.operation)});
           // console.log('or here ');
        }

    }
    else if(operator==='=')
    {
        if(this.state.counter>0)
        {
            let answer=parseInt(this.state.newAnswere)+parseInt(this.state.value);
            console.log('equal operator counter called in plus',this.state.newAnswere,'value',this.state.value);
            this.setState({value:answer});
            console.log("what is thhis value",this.state.value)
        }

       else if(this.state.subcounter>0)
        {
            let answer=parseInt(this.state.value)-parseInt(this.state.newAnswere)
            console.log('equal operator counter called in miunus',this.state.newAnswere,'value',this.state.value);
            this.setState({value:answer,});
            console.log("what is thhis value",this.state.value)
        }
        else if(this.state.operation === '+') {
            let answer = parseInt(this.state.value) + parseInt(this.state.firstValue);
            console.log('firstvalue',this.state.firstValue)
            console.log('value',this.state.value)
            console.log('answere',answer)
            this.setState({value:answer});
            this.setState({counter:1,newAnswere:answer,answer:'',showingTemporaryResult:false,operation:''},()=>{console.log('newcounter',this.state.counter,'newans',this.state.newAnswere)})
            console.log('value=',this.state.value)

        }
        else if(this.state.operation === '-') {
            let answer =  parseInt(this.state.firstValue)-parseInt(this.state.value) 
            console.log('firstvalue',this.state.firstValue)
            console.log('value',this.state.value)
            console.log('answere',answer)
            this.setState({value:answer});
            this.setState({subcounter:1,newAnswere:answer,firstValue:'',secondValue:'',showingTemporaryResult:false},()=>{console.log('newcounter',this.state.counter,'newans',this.state.newAnswere)})
            console.log('value=',this.state.value)

        }


    }



}


render() {
return (
  <div className="cal">

      <input type="num" name="res" value={this.state.value} disabled style={{height:'8vh',width:'47vh',backgroundColor:'black',color:'white',fontSize:'20px'}}/><br></br>
      <input type="button" name="ac" onClick={() => this.cleardisplay()} value="Ac" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="+/-" onClick={() => this.changesign()} value="+/-" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="%" onClick={() => this.percent()}value="%" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="/" onClick={() => this.operation('/')} value='/' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="7" onClick={() => this.handleclick(7)} value="7" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="8" onClick={() => this.handleclick(8)} value="8" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="9" onClick={() => this.handleclick(9)} value="9" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="*" onClick={() => this.operation('*')} value='*' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="4"  onClick={() => this.handleclick(4)} value="4" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="5" onClick={() => this.handleclick(5)} value="5" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="6" onClick={() => this.handleclick(6)}value="6" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="-" onClick={() => this.operation('-')} value='-' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="1" onClick={() => this.handleclick(1)} value="1" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="2" onClick={() => this.handleclick(2)} value="2" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="3" onClick={() => this.handleclick(3)} value="3" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="+" onClick={() => this.operation('+')} value='+' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="0" onClick={() => this.handleclick(0)} value="0" style={{height:'5vh',width:'24vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="." onClick={() => this.dot()} value="." style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="=" onClick={() => this.operation('=')} value="=" style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>



  </div>
)
}
}

这是我的 codepen 链接 https://codepen.io/ahmad-bilal/pen/KRpbWB?editors=1111 请告诉我正确的建议 ................................... ..................................................... ..................................................... ..................................................... ..................................................... ......................................

Answer 1

你从输入元素得到的值是一个你试图求和的字符串 1 + "1" = "11" 而不是 2 如果你想正确地对它们求和，请使用 parseInt(value)...