如何在没有钩子的 React App Calculator 上实现不同的操作

Question

我一直在纠结如何为计算器实现不同的方法和条件来进行加法、乘法、除法和减法。 如果按下，我的代码只能在输入文本上显示每个按钮值（名称）。 我在构造函数调用result 中创建了state，它在input text 中显示value(name) of the button，因此它在输入文本中显示按钮的值，但使用this.setState({result: this.state.result}) 将结果设置为新状态计算器要接受一个以上的值，我必须concatinate 实际的state + an event.target.value。 现在我陷入了如何实现这个计算器工作的方法。

import React,{Component} from "react";


 class DesignedCalc extends Component{
     constructor(props){
      super(props);
      this.state={
      result: "",       
      } 

      // bind all the event
      this.handleClick = this.handleClick.bind(this);
      this.handleClear = this.handleClear.bind(this);
      this.handleCalculate= this.handleCalculate.bind(this);
    } // end of constructor  

    
    //handleClick function that display value(name) of the button in the input Text.
      handleClick(event){
        event.preventDefault();
      let initialValue = this.state.result
      let addValue = event.target.name;
      this.setState({
        result :  initialValue+addValue 
      })  
    }
  
    //handleClear function clear the input form 
    handleClear(event){
      this.setState({
        result:"",
      })
      event.preventDefault()
    };
    
   
   // handleCalculate should give the output; final result of an arithmetic operation   
   handleCalculate(event){
     this.setState({
       result:"help me for the arithmetic logic"????
     })
    event.preventDefault();
  }// end of handleCalculate function

  
  
   render(){
       return(
           <div>
             
          <div className="container">
            <form>
        <div className="header">Calculator</div>
               <input type="text" className="result"  value={this.state.result}  readOnly={true}/> 
        <table>
            <tbody>
          <tr>
            <td><button name="7"  className="global" onClick={this.handleClick}>7</button> </td>
            <td><button name="8"  className="global"  onClick={this.handleClick}>8</button> </td>
            <td><button name="9"  className="global" onClick={this.handleClick}>9</button> </td>
            <td><button name="/"  className="global" onClick={this.handleClick}>/</button></td>
          </tr>
          <tr>
            <td><button name="4"  className="global" onClick={this.handleClick}>4</button> </td>
            <td><button name="5"  className="global" onClick={this.handleClick}>3</button></td>
            <td><button name="6"  className="global" onClick={this.handleClick}>2</button></td>
            <td><button name="*"  className="global" onClick={this.handleClick}>X</button></td>
          </tr>
          <tr>
            <td><button name="1"  className="global" onClick={this.handleClick} >1</button></td>
            <td><button name="2" className="global" onClick={this.handleClick} >2</button></td>
            <td><button name="3"  className="global" onClick={this.handleClick} >3</button></td>
            <td><button name="-"  className="global" onClick={this.handleClick} >-</button></td>
          </tr>
          <tr>
            <td colSpan="3"><button name="0" className="global grey" onClick={this.handleClick} >0</button></td>
            
            <td rowSpan="3"><button name="+" className="global plus"  onClick={this.handleClick}> +</button></td>
          </tr>
          <tr>
            <td><button name="Del" className="global red white-text" onClick={this.handleClear} >Clear</button></td>
            <td colSpan="2"><button name="=" className="global green white-text"  onClick={this.handleCalculate} >=</button></td>
          </tr>
          </tbody>
        </table>
        </form>
        </div>
        
           </div>
       )
   }
 }

export default DesignedCalc

Answer 1

欢迎堆栈溢出。您可以使用 eval 函数，它基本上评估字符串表达式，但我建议在传递给 eval 之前验证输入。

this.setState({
  result: eval(this.state.result)
});