04-Tip Calculator

Challenge #04-Tip-Calculator

第二个挑战项目。

创建一个新项目步骤：

1、写出所有组件结构：function 组件名（）{}

2、在 App 组件里包含这些组件<组件名/>

3、按照页面把每个组件基本元素写下，创建静态页面

4、添加状态更新页面效果，需判断该状态需要在哪些组件发挥作用

（一）页面效果及功能

功能：

输入账单价格和我跟朋友的满意度，系统自动计算需支付的钱，取两个满意度的平均值，再与账单相乘就是小费 tip。点击 Reset 按钮即可复位回到第一个页面。

（二）代码分析

import { useState } from "react";
import "./styles.css";

export default function App() {
  return (
    <div>
      <TipCalculator />
    </div>
  );
}

function TipCalculator() {
  const [bill, setBill] = useState("");
  const [percentage1, setPercentage1] = useState(0);
  const [percentage2, setPercentage2] = useState(0);

  const tip = bill * ((percentage1 + percentage2) / 2 / 100);

  function handleReset() {
    setBill("");
    setPercentage1(0);
    setPercentage2(0);
  }

  return (
    <div>
      <BillInput bill={bill} setBill={setBill} />
      <SelectPercentage percentage={percentage1} setPercentage={setPercentage1}>
        How did you like the service?
      </SelectPercentage>
      <SelectPercentage percentage={percentage2} setPercentage={setPercentage2}>
        How did your friend like the service?
      </SelectPercentage>
      {bill > 0 && (
        <>
          <Output bill={bill} tip={tip} />
          <Reset onreset={handleReset} />
        </>
      )}
    </div>
  );
}

function BillInput({ bill, setBill }) {
  return (
    <div>
      <lable>How much was the bill?</lable>
      <input
        type="text"
        placeholder="Bill value"
        value={bill}
        onChange={(e) => setBill(Number(e.target.value))}
      />
    </div>
  );
}

function SelectPercentage({ children, percentage, setPercentage }) {
  return (
    <div>
      <lable>{children}</lable>
      <select
        value={percentage}
        onChange={(e) => setPercentage(Number(e.target.value))}
      >
        <option value="0">Dissatisfied(0%)</option>
        <option value="5">It was okay(5%)</option>
        <option value="10">It was good(10%)</option>
        <option value="20">Absolutely amazing!(20%)</option>
      </select>
    </div>
  );
}

function Output({ bill, tip }) {
  return (
    <h3>
      You pay {bill + tip} (${bill} +${tip} tip)
    </h3>
  );
}

function Reset({ onreset }) {
  return <button onClick={onreset}>Reset</button>;
}

解释：

（1）children——组件的子节点用法：

如SelectPercentage 组件，传入 children，即可在其他组件内使用 SelectPercentage 组件时，把组件当作“HTML 标签”使用，在开始标记和结束标记内添加文本信息，在 SelectPercentage 组件内用**{children}**就能调用这个文本信息。