React计算器按钮与屏幕交互功能失效问题求助

核心问题及修复步骤 #

• Buttons组件点击事件绑定错误：类组件中访问props必须用this.props，原代码直接写props.handleClick会导致点击事件无法触发，需修改为this.props.handleClick。

• Screen组件未同步props更新：Screen组件将props存入自身state，但props更新时state不会自动同步，应直接使用props渲染，无需维护本地state。

• 直接修改state的违规操作：Calculator组件default分支中this.state.question += value属于直接修改state，违反React状态更新规范，改用函数式setState确保基于最新状态更新。

• AC按钮状态重置不合理：AC按钮将状态设为空格" "，改为空字符串""更合理，避免影响后续计算判断。

修正后的完整代码 #

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(prevState => ({
          question: prevState.question + value
        }));
        break;
      }
    }
  }

  render(){
    return (
      <div>
        <div className="main-body">
          <Screen value={this.state.question}/>
          <Screen value={this.state.answer}/>
          <Buttons handleClick={this.handleClick}/>
        </div>
      </div>
    )
  }
}

class Screen extends React.Component{
  render(){
    return(
      <div>
        <div className="screen">{this.props.value}</div>
      </div>
    )
  }
}

class Buttons extends React.Component{
  render(){
    return (
      <div>
        <div className="btn-box">
          <button value="0" className="btn-style" onClick={this.props.handleClick}>0</button>
          <button value="del" className="btn-style" onClick={this.props.handleClick}>DEL</button>
          <button value="AC"className="btn-style" onClick={this.props.handleClick}>AC</button>
          <button value="1" className="btn-style" onClick={this.props.handleClick}>1</button>
          <button value="2" className="btn-style" onClick={this.props.handleClick}>2</button>
          <button value="3" className="btn-style" onClick={this.props.handleClick}>3</button>
          <button value="4" className="btn-style" onClick={this.props.handleClick}>4</button>
          <button value="5" className="btn-style" onClick={this.props.handleClick}>5</button>
          <button value="6" className="btn-style" onClick={this.props.handleClick}>6</button>
          <button value="7" className="btn-style" onClick={this.props.handleClick}>7</button>
          <button value="8" className="btn-style" onClick={this.props.handleClick}>8</button>
          <button value="9" className="btn-style" onClick={this.props.handleClick}>9</button>
          <button value="+" className="btn-style" onClick={this.props.handleClick}>+</button>
          <button value="-" className="btn-style" onClick={this.props.handleClick}>-</button>
          <button value="=" className="btn-style" onClick={this.props.handleClick}>=</button>
          <button value="/" className="btn-style" onClick={this.props.handleClick}>/</button>
          <button value="*" className="btn-style" onClick={this.props.handleClick}>*</button>
          <button value="." className="btn-style" onClick={this.props.handleClick}>.</button>
        </div>
      </div>
    )
  }
}

const container = document.getElementById("calculator");
ReactDOM.render(<Calculator />, container);

内容的提问来源于stack exchange，提问作者ridzz