import React, {Component} from 'react';
import './Calcular.css';
class Calcular extends Component{
state = {
number1: '',
number2: '',
type: '',
result: ''
}
Calc = () => {
switch(this.state.type){
case 'plus':
this.setState({ result: parseInt(this.state.number1) + parseInt(this.state.number2) });
break;
case 'minus':
this.setState({ result: this.state.number1 - this.state.number2 });
break;
case 'mult':
this.setState({ result: this.state.number1 * this.state.number2 });
break;
case 'div':
this.setState({ result: this.state.number1 / this.state.number2 });
break;
default:
break;
}
}
onSubmitInput = (e) => {
this.setState({ "number1": e.target[0].value, "number2": e.target[1].value, "type": e.target.types.value});
this.Calc();
}
render(){
return(
<div>
<form className="div-calc" onSubmit={this.onSubmitInput.bind(this)} method="post" >
<input type="number" name="number1" placeholder="Number 1" />
<input type="number" name="number2" placeholder="Number 2" />
<select name="types">
<option>Operação: </option>
<option value="plus"> Somar </option>
<option value="minus"> Subtrair </option>
<option value="mult"> Multiplicar </option>
<option value="div" > Dividir </option>
</select>
<button type="submit" > Calcular </button>
</form>
<h3>O resultado é: {this.state.result}</h3>
</div>
);
}
}
export default Calcular;