如何在 React.js 中构建基本表单计算器

2020-05-31 08:00:00 · 飞浪

介绍 React以处理表单和顺利更新DOM而闻名。这两项功能都为开发人员提供了一个很好的机会，让他们通过构建一个简单的表单计算器来练习他们的React技能。在本指南中，您将学习如何仅利用

介绍

React 以处理表单和顺利更新 DOM 而闻名。这两项功能都为开发人员提供了一个很好的机会，让他们通过构建一个简单的表单计算器来练习他们的 React 技能。在本指南中，您将学习如何仅利用 React、JavaScript 和 DOM 操作的核心概念来构建一个基本的表单计算器，而无需任何外部库。

方法

为简单起见，计算器只有一个功能：两个数字相加。它将有两个表单字段：一个用于输入当前数字，另一个用于显示结果的只读输入字段。由于大多数计算器应用程序都是动态的，结果字段将显示总和的当前值，并且可以一次执行任意数量的加法。表单将包含两个按钮：添加按钮和清除按钮。正如名称所示，添加按钮将把当前数字添加到总和中，清除按钮将重置表单字段。

执行

按照以下步骤创建计算器。

设置

确保您的机器上安装了 Nodejs 和npm（至少版本 8 或更高版本）以及代码编辑器和 Web 浏览器（最好是 Chrome 或 Firefox）。

使用 create-react-app 创建一个新项目：

      npx create-react-app react-form-calculator

清理模板

从App.js中删除徽标、App.css及其所有导入。清除 App 组件内的入门模板。你的App.js应该如下所示：

      import React from 'react';
import './App.css';

function App() {
  return(
      <div className="App">          
     </div>
  )
}

export default App;
    

创建表单

创建一个带有两个<input>字段的<form>，一个用于显示结果，另一个用于接收用户的输入。接下来，添加两个按钮来执行添加和清除操作。

      import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <div className="app-title">
        <h1> Basic Form Calculator</h1>
      </div>
      <form>
            <input type="text" id="result" readOnly />   
            <input type="text" id="num" placeholder="enter a number" />
            <button>Add</button>
            <button>Clear</button>
      </form>
    </div>
  );
}
export default App;
    

计算器表单的状态

从 React导入useState以在功能组件中使用状态变量。

      import React,{useState} from 'react';
    

计算器表单将有两个状态变量：一个用于存储总和的当前值，另一个用于切换清除标志。由于结果始终是数字，因此可以将currentSum初始化为0，并将clear设置为false。

      ...
    const [currentSum,setCurrentSum]=useState(0);
    const [clear,setClear]=useState(false);
...
    

添加函数

接收事件对象并对其调用preventDefault()，以防止页面在表单提交时重新加载。每当用户单击添加按钮时，表单都需要知道必须执行加法函数。将清除标志切换为false并获取用户输入的当前数字。作为一个简单的验证，以确保空值不会破坏代码，如果用户点击添加按钮而没有输入任何数字，则退出流程。使用parseInt()将输入字符串解析为整数并将其添加到currentSum。最后，清除输入字段以输入下一个数字。

      ...
const Add=(e)=>{
    e.preventDefault();
    if(clear) setClear(false);
    let currentNum=document.querySelector('#num').value
    if(currentNum=='')
    return;
    let sum= currentSum+parseInt(currentNum);
    setCurrentSum(sum);
    document.querySelector('#num').value="";

}
...
    

清除函数

在 clear 函数中，只需重置表单并通过将clear标志设置为true并将currentSum设置为0将状态变量设置为适当的值。

      ...
 const Clear=(e)=>{
    e.preventDefault();
    console.log('sum:', currentSum);
    document.querySelector('form').reset();
    setClear(true);
    setCurrentSum(0);
  }
...
    

为了确保在应用程序首次加载或调用Clear()时结果字段为空，请在组件首次挂载时以及每当clear标志设置为true时，在useEffect挂钩内将此字段的值设置为空字符串。

      ...
  useEffect(()=>{
    document.querySelector('#result').value="";
  },[])

  useEffect(()=>{
    if(clear)
    document.querySelector('#result').value="";
  })
...
    

最后，你的App.js应该如下所示：

      import React,{useState, useEffect} from 'react';
import './App.css';

function App() {
  const [currentSum,setCurrentSum]=useState(0);
  const [clear,setClear]=useState(false);

  useEffect(()=>{
    document.querySelector('#result').value="";
  },[])
  
  useEffect(()=>{
    if(clear)
    document.querySelector('#result').value="";
  })

  const Add=(e)=>{
    e.preventDefault();
    if(clear) setClear(false);
    let currentNum=document.querySelector('#num').value
    if(currentNum=='')
    return;
    let sum= currentSum+parseInt(currentNum);
    setCurrentSum(sum);
    document.querySelector('#num').value="";
      
  }

  const Clear=(e)=>{
    e.preventDefault();
    console.log('sum:', currentSum);
    document.querySelector('form').reset();
    setClear(true);
    setCurrentSum(0);
  }

  return (
    <div className="App">
      <div className="app-title">
        <h1> Basic Form Calculator</h1>
      </div>
      <form>
            <input type="text" id="result" value={currentSum}  readOnly />   
            <input type="text" id="num" placeholder="enter a number" />
            <button onClick={Add}>Add</button>
            <button onClick={Clear}>Clear</button>
      </form>
    </div>
  );
}

export default App;
    

测试

在根目录中，运行：

      npm start

这将启动本地开发服务器（通常在端口3000上），您可以在页面上看到基本形式的计算器。它将执行任意两个整数的加法，并在您单击清除按钮时重置这些计算。

改进应用程序

您还可以通过多种方式探索本指南之外的内容并对应用程序进行一些改进。

更新 UI

您可以使用任何 CSS 框架来为该表单提供更有趣的设计和界面。您可以直接从手机上的计算器应用中获取灵感，并尝试通过一些自定义样式制作一个完全相同的副本。

扩展功能

与执行加法的方式类似，您可以扩展此应用程序以执行其他基本数学计算，例如减法、乘法、除法等。为了整合更多高级功能，JavaScript 的数学对象提供了大量可直接使用的数学函数。

设置验证和警报

良好的用户体验总是伴随着对用户的有意义的反馈。您可以在必要时设置验证，并添加警报，让用户了解应用运行时的当前流程、错误或事件。

使用键盘组件

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React.js 中构建基本表单计算器

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; import './App.css'; function App() { return ( <div className="App"> <div className="app-title"> <h1> Basic Form Calculator</h1> </div> <form> <input type="text" id="result" readOnly /> <input type="text" id="num" placeholder="enter a number" /> <button>Add</button> <button>Clear</button> </form> </div> ); } export default App;

... const Add=(e)=>{ e.preventDefault(); if(clear) setClear(false); let currentNum=document.querySelector('#num').value if(currentNum=='') return; let sum= currentSum+parseInt(currentNum); setCurrentSum(sum); document.querySelector('#num').value=""; } ...

import React,{useState, useEffect} from 'react'; import './App.css'; function App() { const [currentSum,setCurrentSum]=useState(0); const [clear,setClear]=useState(false); useEffect(()=>{ document.querySelector('#result').value=""; },[]) useEffect(()=>{ if(clear) document.querySelector('#result').value=""; }) const Add=(e)=>{ e.preventDefault(); if(clear) setClear(false); let currentNum=document.querySelector('#num').value if(currentNum=='') return; let sum= currentSum+parseInt(currentNum); setCurrentSum(sum); document.querySelector('#num').value=""; } const Clear=(e)=>{ e.preventDefault(); console.log('sum:', currentSum); document.querySelector('form').reset(); setClear(true); setCurrentSum(0); } return ( <div className="App"> <div className="app-title"> <h1> Basic Form Calculator</h1> </div> <form> <input type="text" id="result" value={currentSum} readOnly /> <input type="text" id="num" placeholder="enter a number" /> <button onClick={Add}>Add</button> <button onClick={Clear}>Clear</button> </form> </div> ); } export default App;