1
Ich versuche, React Rechner zu bauen. Bis jetzt funktioniert es nur, wenn die Länge meiner zweiten Nummer gleich 1 ist. Wenn es mehr Ziffern ist, wird es brechen. Hier ist der Code:React Calculator
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>
);
}
}
Ich verstehe, dass das Problem ist mein Zustand:
const current = (this.state.current == 0 || this.state.operator != '' || this.state.current == this.state.total) ? '' : this.state.current
Es funktioniert gut für die erste Zahl, wenn Operator = ‚‘, aber sobald ich einen Operator haben wird es nicht erlauben sie mir, meine Nummer größer als 9
hier zu machen, ist die codepen Demo http://codepen.io/polinaz/pen/PmLoKJ?editors=0010
Irgendwelche Ideen, wie man es beheben? Danke :)
denke ich, die Verbindung des Demo falsch ist – Sheng
Sorry about this! Jetzt aktualisiert – Polina