反应JS |计算器应用程序（添加功能）

在我们之前的文章中，我们已经构建了 UI 的结构，但是我们没有添加样式，也没有添加任何功能。您可以看到，如果您现在单击按钮，则屏幕上不会输入任何内容。因此，在本文中，我们将尝试使我们的计算器应用程序功能齐全。一旦我们的应用程序开始运行，我们将添加 CSS 来为我们的应用程序设置样式。
那么，让我们开始吧。我们将添加的第一个功能是按钮的单击事件。为了处理点击事件，我们将创建一个名为handleClick的新函数，并将这个函数添加到我们的Calculator组件类中。但是，接下来要注意的是，“0-9”按钮和“+、-、*、/”等运算符将具有不同的作用，而“=”、“清除”和“删除”等其他按钮则具有不同的作用。角色。所以，我们可以做的是在handleClick函数内部，我们将使用switch..case语句来执行点击不同按钮的不同操作。
但在这样做之前，让我们看看我们需要哪些状态？我们需要为我们的计算器应用程序创建两个状态，我们将根据用户输入更新这两个状态。我们需要的两个状态是：

• 问题：最初这个状态会用一个空字符串初始化。此状态将用于存储用户输入。
• 答案：最初这个状态会用一个空字符串来初始化。此状态将用于存储用户输入的评估结果，该状态存储在问题中。

在文件calculator.js中的类Calculator 顶部添加以下代码。此代码将为我们创建所需的状态：

javascript

constructor() {
    super();
 
    // set our default state
    this.state = {
      question: '',
      answer: ''
    }
 
    // Bind our handleClick method (sets 'this' explicitly
    // to refer to this component) We did this because 'this'
    // would refer to the source of the click events
    this.handleClick = this.handleClick.bind(this);
  }

从现在开始，我们已经创建了我们的状态来存储用户输入和答案。让我们完成我们的handleClick函数，根据不同的按钮点击来更新这些状态。
将以下函数添加到calculator.js文件中的类Calculator 中：

PHP

// our method to handle all click events from our buttons
handleClick(event){
 
  // get the value from the target element (button)
  const value = event.target.value;
 
  switch (value) {
    case '=': {
 
      // if it's an equal sign, use the eval module
      // to evaluate the question ,convert the answer
      // (in number) to String
      if (this.state.question!=='')
      {
          var ans='';
            try
              {
                  ans = eval(this.state.question);
              }
              catch(err)
              {
                  this.setState({answer: "Math Error"});
              }
              if (ans===undefined)
                  this.setState({answer: "Math Error"});
 
              // update answer in our state.
              else
                  this.setState({ answer: ans , question: ''});
              break;
          }
    }
    case 'Clear': {
 
      // if it's the Clears sign, just clean our
      // question and answer in the state
      this.setState({ question: '', answer: '' });
      break;
    }
 
    case 'Delete': {
      var str = this.state.question;
        str = str.substr(0,str.length-1);
        this.setState({question: str});
        break;
    }
 
  default: {
 
      // for every other command, update the answer in the state
      this.setState({ question: this.state.question += value})
      break;
    }
  }
}

现在，我们完成了所有功能的添加，但是，如果我们在浏览器中单击计算器应用程序的按钮，什么也不会发生。这背后的原因是我们没有在 button.js 文件中的 Button 组件中将我们的handleClick函数与按钮的 onClick 属性链接起来。为此，我们将handleClick函数作为 props 传递给 Button 组件，并将此函数分配给 Button 组件中按钮的 onClick 事件。
我们将在我们的 Calculator 组件中的任何地方添加以下行，从这里我们调用我们的 Button 组件以将 handleClick函数作为道具传递给 Button 组件：

handleClick = {this.handleClick}

添加后，我们将转到 button.js 文件，并将以下属性添加到输入字段：

onClick = {props.handleClick}

现在一切都设置好了。点击我们的按钮，我们的状态会得到更新。但是等等，我们仍然无法在浏览器中看到我们的应用程序有任何变化。让我们回忆一下出了什么问题。问题是我们没有将状态传递给 OutputScreen 组件。所以我们的 OutputScreen 组件没有任何东西可以在屏幕上渲染。因此，让我们更新我们的 OutputScreen 和 OutputScreenRow 组件以接受 props 并将问题和答案状态从 Calculator 组件传递到 OutputScreen 组件作为 props。
完成此操作后，将 OutputScreen 组件内部的 props 作为值传递给 OutputScreenRow 组件，以在输入字段中显示它们。
下面是我们最终的outputscreen.js文件：

javascript

// Import React (Mandatory Step).
import React from 'react';
 
// Import Output Screen Row.
import OutputScreenRow from './outputScreenRow.js';
 
// Functional Component.
// Use to hold two Screen Rows.
const OutputScreen = (props) => {
  return (
    

      
      
    
  )
}
 
// Export Output Screen.
export default OutputScreen;

下面是我们最终的outputscreenrow.js文件：

javascript

// Import React (Mandatory Step).
import React from 'react';
 
// Functional Component.
// Used to show Question/Answer.
const OutputScreenRow = (props) => {
  return (
    

      
    
  )
}
 
// Export Output Screen Row.
export default OutputScreenRow;

您可以在下图中看到我们的计算器应用程序运行良好，并且具有与我们在第一篇文章中看到的相同的功能。在我们的下一篇文章中，我们将为此添加样式，并尝试总结到目前为止我们为构建这个应用程序所做的工作。

反应JS |计算器应用程序（样式）