使用ReactJS构建一个简单的小费计算器应用

在本文中，我们将学习如何使用React.js创建一个简单的小费计算器应用。对此，我们将从设置一个新的React应用程序开始，然后继续构建应用程序的用户界面，并实现根据账单和所需小费百分比计算小费金额的功能。最终的项目将如下图所示：

先决条件： 这个项目的先决条件如下：

HTML
CSS
Javascript ES6
React
功能组件

方法

使用下面的安装过程创建一个简单的React应用程序，它将根据总账单金额计算小费值。这个简单的账单分割计算器将允许用户输入总账单金额和选择小费百分比。用户还可以调整分割次数。分割总额会自动计算并显示。该代码使用React hooks（useState和useEffect）来管理状态并根据用户输入进行计算。

创建React应用程序

步骤1： 使用以下命令创建一个React应用程序：

npx create-react-app tip-calculator

步骤2： 在创建你的项目文件夹，即react-app后，使用以下命令进入：

cd tip-calculator

项目结构

按照上述步骤进行后，项目结构会如下所示：

使用ReactJS构建一个简单的小费计算器应用

示例： 此示例演示了使用React.js创建的简单小费计算器应用程序，用于根据总账单金额计算小费金额。在 app.js 文件中包含了账单总额、小费百分比、分摊金额等输入，并生成了分摊总金额。为了进行样式设置，app.css文件将包含应用程序的不同样式属性。

// App.js 
  
import "./App.css"; 
import { useEffect, useState } from "react"; 
  
function App() { 
  
    // State for storing bill total     
    const [bill, setBill] = useState(""); 
  
    // State for storing tip percentage 
    const [tip, setTip] = useState("10%"); 
  
    // State for storing number of splits 
    const [split, setSplit] = useState(1); 
  
    // State for storing split total 
    const [splitTotal, setSplitTotal] = useState(0); 
  
    // Function to handle changes in the tip input 
    function handleTipChange(e) { 
        let value = e.target.value.replace("%", ""); 
        if (value.indexOf("%") === -1) { 
            value = value + "%"; 
        } 
        setTip(value); 
    } 
  
    // Function to handle changes in the 
    // bill total input 
    function handleBillChange(e) { 
        setBill(e.target.value); 
    } 
  
    // Function to decrease the number of splits by 1 
    function splitMinus() { 
        setSplit((oldValue) => Math.max(oldValue - 1, 1)); 
    } 
  
    // Function to increase the number of splits by 1 
    function splitPlus() { 
        setSplit((oldValue) => oldValue + 1); 
    } 
  
    // Function to calculate the split total  
    // based on bill, tip, and number of splits 
    function calculate() { 
        const percentage = 1 + parseInt(tip.replace("%", "")) / 100; 
        const result = ((bill * percentage) / split).toFixed(2); 
        setSplitTotal(result); 
    } 
  
    // useEffect hook to calculate the split total 
    // whenever bill, tip, or split changes 
    useEffect(() => { 
        calculate(); 
    }, [bill, tip, split]); 
  
    return ( 
        <main> 
            {/* Bill total input */} 
            <label>Bill total</label> 
            <input 
                type="text"
                placeholder={"0.00"} 
                value={bill} 
                onChange={handleBillChange} 
            /> 
  
            {/* Tip input */} 
            <label>Tip</label> 
            <input 
                type="text"
                placeholder={"0.00"} 
                value={tip} 
                onChange={handleTipChange} 
            /> 
  
            <div className="summary"> 
  
                {/* Split section */} 
                <div className="split"> 
                    <label>Split</label> 
                    <div className="split-control"> 
                        <button onClick={splitMinus}>-</button> 
                        <span>{split}</span> 
                        <button onClick={splitPlus}>+</button> 
                    </div> 
                </div> 
  
                {/* Result section */} 
                <div className="result"> 
                    <label>Split total</label> 
                    <span>{splitTotal}</span> 
                </div> 
            </div> 
        </main> 
    ); 
} 
  
export default App;

CSS

/* App.css */
  
body { 
    background: #f2f2f2; 
    color: #333; 
    padding: 20px; 
} 
  
label { 
    display: block; 
    text-transform: uppercase; 
    font-size: 0.8rem; 
    line-height: 0.5rem; 
    padding-left: 1px; 
    color: rgba(0, 0, 0, 0.7); 
} 
  
input[type="text"] { 
    background: transparent; 
    border: 0; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    color: #555; 
    font-size: 1.4rem; 
} 
  
.summary { 
    background: #ffcc00; 
    padding: 10px; 
    border-radius: 10px; 
    display: flex; 
    justify-content: space-between; 
    font-size: 1.7rem; 
} 
  
.summary label { 
    line-height: 0.8rem; 
} 
  
.split-control { 
    display: flex; 
    align-items: center; 
    justify-items: center; 
} 
  
.split-control span { 
    display: block; 
    padding: 0 3px; 
} 
  
.split button { 
    border-radius: 99999999px; 
    border: 0; 
    width: 20px; 
    height: 20px; 
    background: #4caf50; 
    color: #fff; 
    cursor: pointer; 
} 
  
.result { 
    text-align: right; 
} 
  
main { 
    width: 200px; 
    margin: 20px auto; 
}