html 屏幕和按钮之间的功能不起作用

yxyvkwin  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(114)

我一直在调试,但没有任何进展。我确信问题出在渲染值上。否则它将是其他的东西。我认为是屏幕组件或按钮组件造成的问题。我仍然是一个初学者的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天了,但没有任何进展

8fsztsew

8fsztsew1#

在每个props上添加this关键字,该组件不能识别props。

<button value="0" className="btn-style" onClick={this.props.handleClick}>
  0
</button>;

或者可替换地

render() {
    const { props } = this;
    return (

相关问题