React 果果记账-记账页面构建指南

前端

2024-01-07 19:40:51

前言

React是一种用于构建用户界面的 JavaScript 库，它以其高效、灵活和可扩展性著称。在本文中，我们将使用React构建一个记账页面，名为“果果记账”，该页面将提供记账功能，帮助用户管理他们的财务状况。

正文

在开始构建记账页面之前，我们需要先了解几个重要概念：

受控组件 ：受控组件是指由React管理其值的状态的组件。当组件的状态发生变化时，组件的UI也会随之变化。
非受控组件 ：非受控组件是指不通过React管理其值的状态的组件。当组件的状态发生变化时，组件的UI不会随之变化。
onChange ：onChange是一个事件处理程序，它会在用户输入值时触发。在React中，onChange事件处理程序用于处理用户输入数据。在HTML中，onChange事件处理程序用于处理用户在表单字段中输入值。

了解这些概念后，我们可以开始构建记账页面了。

搭建步骤

新建React项目

使用create-react-app命令创建一个新的React项目。

npx create-react-app果果记账

安装必要的依赖项

安装axios、react-router-dom和react-toastify依赖项。

npm install axios react-router-dom react-toastify

创建记账页面组件

在src目录下创建一个名为Account.js的新文件，并将其内容替换为以下代码：

import React, { useState } from "react";
import axios from "axios";
import { toast } from "react-toastify";

const Account = () => {
  const [account, setAccount] = useState({
    name: "",
    amount: 0,
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setAccount({ ...account, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    axios
      .post("http://localhost:3001/accounts", account)
      .then((res) => {
        toast.success("记账成功！");
        setAccount({ name: "", amount: 0 });
      })
      .catch((err) => {
        toast.error("记账失败！");
      });
  };

  return (
    <div className="account-page">
      <h1>果果记账</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">名称：</label>
        <input
          type="text"
          name="name"
          value={account.name}
          onChange={handleChange}
        />
        <label htmlFor="amount">金额：</label>
        <input
          type="number"
          name="amount"
          value={account.amount}
          onChange={handleChange}
        />
        <button type="submit">记账</button>
      </form>
    </div>
  );
};

export default Account;

在App.js中添加路由

在App.js文件中，添加以下代码以将记账页面添加到路由中：

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Account from "./Account";

const App = () => {
  return (
    <Router>
      <Route path="/" exact component={Account} />
    </Router>
  );
};

export default App;