我试图设计一个基本的计算器应用程序使用React,这是有以下设计。
灰色区域中有两个文本框,第一个用于输入,第二个用于输出。
在我的本地,当我点击按钮,例如:8和3,并尝试做任何数学运算,该值不会显示在输入文本框中,也不会在输出文本框中看到最终结果。
我尝试了以下解决方案:
如下面的代码所示,有一个handleClick函数,用于处理每个按钮的单击操作,并且此函数将作为属性传递给Button组件。
在handleClick事件中,我们使用switch关键字对不同的按钮执行不同的操作。
问题:在"="开关大小写中,以下代码行
ans = eval(此状态问题);
给出空结果。
预期输出:ans变量应根据数学运算生成正确的值。
handleClick(event){
// get the value from the target element (button)
const value = event.target.value;
switch (value) {
case '=': {
// if it's an equal sign, use the eval module
// to evaluate the question ,convert the answer
// (in number) to String
if (this.state.question!=='')
{
var ans='';
try
{
ans = eval(this.state.question);
}
catch(err)
{
this.setState({answer: "Math Error"});
}
if (ans === undefined)
this.setState({answer: "Math Error"});
// update answer in our state.
else
this.setState({ answer: ans , question: ''});
break;
}
break;
}
case 'Clear': {
// if it's the Clears sign, just clean our
// question and answer in the state
this.setState({ question: '', answer: '' });
break;
}
case 'Delete': {
var str = this.state.question;
str = str.substr(0,str.length-1);
this.setState({question: str});
break;
}
default: {
// for every other command, update the answer in the state
this.setState({ question: this.state.question += value})
break;
}
}
}
render()
{
return (
<div className="frame">
<CalculatorTitle value="GeeksforGeeks Calculator"/>
<div className="mainCalc">
<OutputScreen/>
<div className="button-row">
<Button handleClick = {this.handleClick}
label={'Clear'}/>
<Button handleClick = {this.handleClick}
label={'Delete'}/>
<Button handleClick = {this.handleClick}
label={'.'}/>
<Button handleClick = {this.handleClick}
label={'/'}/>
</div>
<div className="button-row">
<Button handleClick = {this.handleClick}
label={'7'}/>
<Button handleClick = {this.handleClick}
label={'8'}/>
<Button handleClick = {this.handleClick}
label={'9'}/>
<Button handleClick = {this.handleClick}
label={'*'}/>
</div>
<div className="button-row">
<Button handleClick = {this.handleClick}
label={'4'}/>
<Button handleClick = {this.handleClick}
label={'5'}/>
<Button handleClick = {this.handleClick}
label={'6'}/>
<Button handleClick = {this.handleClick}
label={'-'}/>
</div>
<div className="button-row">
<Button handleClick = {this.handleClick}
label={'1'}/>
<Button handleClick = {this.handleClick}
label={'2'}/>
<Button handleClick = {this.handleClick}
label={'3'}/>
<Button handleClick = {this.handleClick}
label={'+'}/>
</div>
<div className="button-row">
<Button handleClick = {this.handleClick}
label={'0'}/>
<Button handleClick = {this.handleClick}
label={'='}/>
</div>
</div>
</div>
);
}
1条答案
按热度按时间bvhaajcl1#
你的按钮没有任何值属性。不如尝试使用标签属性
event.target.label
来访问值,或者你也可以使用event.target.innerText
来访问按钮的值。根据我对你的代码的理解,这应该可以工作。