如何在没有钩子的 React 应用程序计算器上实现不同的操作

Question

我陷入了如何实现计算器加、乘、除和减的不同方法和条件的困扰。 我的代码只能在按下输入文本时显示输入文本上的每个按钮值(名称)。 我在构造函数调用result中创建了state，该在input text中显示value(name) of the button，因此它在输入文本中显示按钮的值，但使用this.setState({result: this.state.result})将结果设置为新状态，并且为了让计算器接受多个值，我必须concatinate实际state+event.target.value。 现在我陷入了如何实现此计算器工作的方法的困境。

import React,{Component} from "react";

class DesignedCalc extends Component{
constructor(props){
super(props);
this.state={
result: "",       
} 
// bind all the event
this.handleClick = this.handleClick.bind(this);
this.handleClear = this.handleClear.bind(this);
this.handleCalculate= this.handleCalculate.bind(this);
} // end of constructor  

//handleClick function that display value(name) of the button in the input Text.
handleClick(event){
event.preventDefault();
let initialValue = this.state.result
let addValue = event.target.name;
this.setState({
result :  initialValue+addValue 
})  
}

//handleClear function clear the input form 
handleClear(event){
this.setState({
result:"",
})
event.preventDefault()
};


// handleCalculate should give the output; final result of an arithmetic operation   
handleCalculate(event){
this.setState({
result:"help me for the arithmetic logic"????
})
event.preventDefault();
}// end of handleCalculate function


render(){
return(
<div>

<div className="container">
<form>
<div className="header">Calculator</div>
<input type="text" className="result"  value={this.state.result}  readOnly={true}/> 
<table>
<tbody>
<tr>
<td><button name="7"  className="global" onClick={this.handleClick}>7</button> </td>
<td><button name="8"  className="global"  onClick={this.handleClick}>8</button> </td>
<td><button name="9"  className="global" onClick={this.handleClick}>9</button> </td>
<td><button name="/"  className="global" onClick={this.handleClick}>/</button></td>
</tr>
<tr>
<td><button name="4"  className="global" onClick={this.handleClick}>4</button> </td>
<td><button name="5"  className="global" onClick={this.handleClick}>3</button></td>
<td><button name="6"  className="global" onClick={this.handleClick}>2</button></td>
<td><button name="*"  className="global" onClick={this.handleClick}>X</button></td>
</tr>
<tr>
<td><button name="1"  className="global" onClick={this.handleClick} >1</button></td>
<td><button name="2" className="global" onClick={this.handleClick} >2</button></td>
<td><button name="3"  className="global" onClick={this.handleClick} >3</button></td>
<td><button name="-"  className="global" onClick={this.handleClick} >-</button></td>
</tr>
<tr>
<td colSpan="3"><button name="0" className="global grey" onClick={this.handleClick} >0</button></td>

<td rowSpan="3"><button name="+" className="global plus"  onClick={this.handleClick}> +</button></td>
</tr>
<tr>
<td><button name="Del" className="global red white-text" onClick={this.handleClear} >Clear</button></td>
<td colSpan="2"><button name="=" className="global green white-text"  onClick={this.handleCalculate} >=</button></td>
</tr>
</tbody>
</table>
</form>
</div>

</div>
)
}
}
export default DesignedCalc

Answer 1

欢迎使用堆栈溢出。 您可以使用 eval 函数，它基本上计算字符串表达式，但我建议在传递给 eval 之前验证输入。

this.setState({
result: eval(this.state.result)
});