React Calculator：多点问题和方程问题

问题描述

我已经在React中创建了可运行的计算器，但有两点需要弄清楚：

我想确保如果用户已经单击过一次，则不能输入第二个点
我希望方程式使用最后一个运算符（例如5 *-+ 5应该产生10的输出）

我仍然是一个初学者，所以我需要一个简单的代码来完成这些工作，而且我似乎无法弄清楚。非常感谢！这是到目前为止我的完整代码和Codepen链接：https://codepen.io/JuliaAyres/pen/dyXGvbO

class App extends React.Component {

   constructor(props){
    super(props);
    this.state = {
      display:'0'
    }
    this.changeValue = this.changeValue.bind(this);
    this.equalEval = this.equalEval.bind(this);
  }

  changeValue(event){
    if(event.target.value==='CE'){
      this.setState({display: '0'});
    }else{
      this.setState({
        display: (this.state.display==="0" ? event.target.value : this.state.display + event.target.value)
      });
    }
  }

  equalEval(){
    this.setState({
        display: eval(this.state.display)
    });
  }

  render() {
    return (
      <div className="App">

        <div className="calculator">
            <div id="display">{this.state.display}</div>
          
            <div className="buttongrid">

            <button value="CE" id="clear"  className="button" onClick={this.changeValue}>CE</button>
            <button value=" / " id="divide"  className="button" onClick={this.changeValue}>/</button>
            <button value=" * " id="multiply"  className="button" onClick={this.changeValue}>x</button>
            
            <button value="7" id="seven" className="button" onClick={this.changeValue}>7</button>
            <button value="8" id="eight" className="button" onClick={this.changeValue}>8</button>
            <button value="9" id="nine" className="button" onClick={this.changeValue}>9</button>
            <button value=" - " id="subtract" className="button" onClick={this.changeValue}>-</button>
            
            <button value="4" id="four" className="button" onClick={this.changeValue}>4</button>
            <button value="5" id="five" className="button" onClick={this.changeValue}>5</button>
            <button value="6" id="six" className="button" onClick={this.changeValue}>6</button>
            <button value=" + " id="add" className="button" onClick={this.changeValue}>+</button>

            <button value="1" id="one" className="button" onClick={this.changeValue}>1</button>
            <button value="2" id="two" className="button" onClick={this.changeValue}>2</button>
            <button value="3" id="three" className="button" onClick={this.changeValue}>3</button>
            

            <button value="." id="decimal" className="button" onClick={this.changeValue}>.</button>
            <button value="0" id="zero" className="button" onClick={this.changeValue}>0</button>
            <button value=" = " id="equals" className="button" onClick={this.equalEval}>=</button>
            

            </div>
      </div>
      </div>
    );
  }
}

ReactDOM.render(<App />,document.getElementById('root'));

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

calculator reactjs reactjs