reactjs - 如何在没有钩子的 React App Calculator 上实现不同的操作
问题描述
我被困在如何为计算器实现不同的方法和条件以进行加法、乘法、除法和减法。如果按下,我的代码只能在输入文本上显示每个按钮值(名称)。我state
在构造函数调用中创建了它,它result
显示value(name) of the button
在input text
输入文本中的按钮的值,但将结果设置为一个新的状态,使用this.setState({result: this.state.result})
and 让计算器接受一个以上的值,而不是我对concatinate
实际state
+ an 的一个值 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
解决方案
欢迎堆栈溢出。您可以使用基本上评估字符串表达式的 eval 函数,但我建议在传递给 eval 之前验证输入。
this.setState({
result: eval(this.state.result)
});
推荐阅读
- angular - 从列表组件中获取 selectItems 的反应方式,并在角度 6 中更改项目
- scala - 从火花数据框中选择几列,并以列列表作为开始
- javascript - 用于手风琴数据的 vuejs 中的嵌套 v-for
- sql - 需要帮助 在 Microsoft SQL Server 中分组和创建选择语句
- scala - 尝试使用列表中的条件执行多个 where 时出现“我需要类型的递归值”错误
- python - 添加一系列数字python 2.7
- ssis - SSIS将文件名存储为变量
- php - 将样式表排入 wordpress 的首页
- css - 如何考虑样式化 AngularJS 组件?
- mysql - 使用 JOIN 从 2 个表中选择,并将一个表中的列值与其他表的计数进行比较