1
我正在嘗試構建React計算器。到目前爲止，只有當我的第二個數字的長度等於1時，它纔有效。如果它的數字更多，它就會中斷。下面是代碼：反應計算器
class Calculator extends Component {
constructor(props) {
super(props);
this.state = {
current: 0,
total: 0,
operator: ''
};
}
handleType = (e) =>{
const current = (this.state.current == 0 || this.state.operator != '' || this.state.current == this.state.total) ? '' : this.state.current
this.setState({
current: parseInt(current + e.target.attributes.getNamedItem('data-filter').value)
});
}
calculate = (sign, number) => {
const total = this.state.total;
console.log(total);
switch(sign){
case "-":
return total - number;
break;
case "+":
return total + number;
break;
case "*":
return total * number;
break;
case "/":
return total/number;
break;
default:
return 0;
}
};
handleAction = (e) =>{
const operator = e.target.attributes.getNamedItem('data-filter').value;
console.log(operator);
this.setState({
total: this.state.current,
operator: operator
});
console.log(this.state);
}
getResult =() =>{
this.setState({
current: this.calculate(this.state.operator, this.state.current)
});
}
render() {
return (
<div className="Calculator text-center">
<h2>Result: {this.state.current} </h2>
<div className="row">
<button data-filter="7" onClick={this.handleType}>7</button>
<button data-filter="8" onClick={this.handleType} >8</button>
<button data-filter="9" onClick={this.handleType} >9</button>
<button data-filter="+" onClick ={this.handleAction} >+</button>
</div>
<div className="row">
<button data-filter="4" onClick={this.handleType}>4</button>
<button data-filter="5" onClick={this.handleType}>5</button>
<button data-filter="6" onClick={this.handleType}>6</button>
<button data-filter="-" onClick ={this.handleAction} >-</button>
</div>
<div className="row">
<button data-filter="1" onClick={this.handleType}>1</button>
<button data-filter="2" onClick={this.handleType}>2</button>
<button data-filter="3" onClick={this.handleType}>3</button>
<button data-filter="*" onClick ={this.handleAction} >*</button>
<button data-filter="/" onClick ={this.handleAction} >/</button>
</div>
<div className="row">
<button>0</button>
<button>save</button>
<button>cancel</button>
<button onClick={this.getResult}>=</button>
</div>
</div>
);
}
}
我明白，這個問題是我的條件：
const current = (this.state.current == 0 || this.state.operator != '' || this.state.current == this.state.total) ? '' : this.state.current
它工作正常的第一個號碼，當操作者=「」，但一旦我有一個運營商也不會請允許我我的號碼比9
這裏更大的是codepen演示http://codepen.io/polinaz/pen/PmLoKJ?editors=0010
任何想法如何解決呢？謝謝:)
我想演示的鏈接是錯誤 – Sheng
對不起這個！現在更新它 – Polina