当我添加两个值时，它给了我正确的答案，例如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 请告诉我正确的灵魂............................................ .................................................. .................................................. .................................................. .................................................. ......................................
答案 0 :(得分：0)
你从输入元素得到的值是你想要加1 +“1”=“11”的字符串而不是2如果你想正确加它们使用parseInt（value）......