我一直在调试,但没有任何进展。我确信问题出在渲染值上。否则它将是其他的东西。我认为是屏幕组件或按钮组件造成的问题。我仍然是一个初学者的React,这就是为什么我不能清楚地表达我哪里出了问题
class Calculator extends React.Component{
constructor(props){
super(props);
this.state={
question:"",
answer: ""
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
const value = e.target.value;
switch(value){
case "=" :{
if(this.state.question !== ""){
let result = "";
try {
result = eval(this.state.question);
}
catch(err){
this.setState({
answer: "MATH ERROR"
});
}
if(result ===undefined){
this.setState({answer: "MATH ERROR"})
}
else{
this.setState({
question: "",
answer: result
});
}
}
break;
}
case "del" : {
var str = this.state.question;
str = str.substr(0, str.length-1);
this.setState({
question: str
})
break;
}
case "AC" : {
this.setState({
question: " ",
answer: " "
});
break;
}
default:{
this.setState({
question: this.state.question += value
});
break;
}
}
}
render(){
return <div>
<div className="main-body">
<Screen question={this.state.question}/>
<Screen answer={this.state.answer}/>
<Buttons handleClick={this.handleClick}/>
</div>
</div>
}
}
class Screen extends React.Component{
constructor(props){
super(props);
this.state={
value: props.value
}
}
render(){
return<div>
<div className="screen">{this.state.value}</div>
</div>
}
}
class Buttons extends React.Component{
constructor(props){
super(props);
}
render(){
return <div>
<div className="btn-box">
<button value="0" className="btn-style" onClick={props.handleClick} >0</button>
<button value="del" className="btn-style" onClick={props.handleClick}>DEL</button>
<button value="AC"className="btn-style" onClick={props.handleClick}>AC</button>
<button value="1" className="btn-style" onClick={props.handleClick}>1</button>
<button value="2" className="btn-style" onClick={props.handleClick}>2</button>
<button value="3" className="btn-style" onClick={props.handleClick}>3</button>
<button value="4" className="btn-style" onClick={props.handleClick}>4</button>
<button value="5" className="btn-style" onClick={props.handleClick}>5</button>
<button value="6" className="btn-style" onClick={props.handleClick}>6</button>
<button value="7" className="btn-style" onClick={props.handleClick}>7</button>
<button value="8" className="btn-style" onClick={props.handleClick}>8</button>
<button value="9" className="btn-style" onClick={props.handleClick}>9</button>
<button value="+" className="btn-style" onClick={props.handleClick}>+</button>
<button value="-" className="btn-style" onClick={props.handleClick}>-</button>
<button value="=" className="btn-style" onClick={props.handleClick}>=</button>
<button value="/" className="btn-style" onClick={props.handleClick}>/</button>
<button value="*" className="btn-style" onClick={props.handleClick}>*</button>
<button value="." className="btn-style" onClick={props.handleClick}>.</button>
</div>
</div>
}
}
const container = document.getElementById("calculator");
ReactDOM.render(<Calculator />, container);
我认为按钮和屏幕之间的功能在我的代码中不起作用。我已经试着解决它2天了,但没有任何进展
1条答案
按热度按时间8fsztsew1#
在每个
props
上添加this
关键字,该组件不能识别props。或者可替换地