ReactJS |计算器应用程序（添加功能）-yiteyi-C++库

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

null

问题：最初，此状态将用空字符串初始化。此状态将用于存储用户输入。
答复：最初，此状态将用空字符串初始化。此状态将用于存储状态中存储的用户输入评估结果问题 .

将下面的代码添加到文件中类计算器的顶部 计算器js .此代码将为我们创建所需的状态：

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                                        );                         
                                                     }                         

从现在起，我们创建了状态来存储用户输入和答案。让我们完成我们的任务手舔功能根据不同的按钮点击更新这些状态。将下面的函数添加到 计算器js 文件：

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                                        ;                         
                                                     }                         
                                                     }                         
                           }                         

现在，我们已经完成了添加所有功能，但如果我们在浏览器中单击计算器应用程序的按钮，什么都不会发生。这背后的原因是我们没有将手舔在按钮中的按钮组件中使用按钮的onClick属性。js文件。为此，我们将通过手舔作为按钮组件的道具，并将此功能分配给按钮组件中的按钮onClick事件。我们将在计算器组件中的每一处添加以下行，从中调用按钮组件，将handleClick函数作为道具传递给按钮组件：

handleClick = {this.handleClick}

添加此项后，我们将转到按钮。js文件，并将以下属性添加到输入字段：

onClick = {props.handleClick}

现在一切都准备好了。点击我们的按钮，我们的州就会得到更新。但是等等，我们仍然无法在浏览器中看到我们的应用程序有任何变化。让我们回忆一下出了什么问题。问题是我们没有将状态传递给OutputScreen组件。所以我们的OutputScreen组件没有任何东西可以在屏幕上渲染。所以，让我们更新OutputScreen和OutputScreenRow组件，以接受道具并通过测试问题和答复从计算器组件到输出屏幕组件的状态作为道具。完成此操作后，将道具从OutputScreen组件内部传递到OutputScreenRow组件，作为值显示在输入字段中。下面是我们的期末考试 输出屏幕。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                                        (                         
                                                     <div className="screen">                         
                                                     <OutputScreenRow value = {props.question}/>                         
                                                     <OutputScreenRow value = {props.answer}/>                         
                                                     </div>                         
                                                     )                         
                           }                         
            
                           // 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                                        (                         
                                                     <div className="screen-row">                         
                                                     <input type="text" readOnly value = {props.value}/>                         
                                                     </div>                         
                                                     )                         
                           }                         
            
                           // Export Output Screen Row.                         
                           export                                        default                                        OutputScreenRow;                         

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

图片[1]-ReactJS |计算器应用程序（添加功能）-yiteyi-C++库

ReactJS |计算器应用程序（造型）

文章版权归作者所有，未经允许请勿转载。

THE END

技术文章