React果果记账-标签页基础功能制作，助你轻松玩转记账新体验！

2023-10-13 23:31:11

在React果果记账中，标签页是用于分类账单、收支明细和预算控制的重要功能。标签页可以帮助我们轻松查找和管理不同类型的账单，从而更好地了解我们的收支情况和财务状况。

创建标签页

首先，我们先来创建标签页。在React果果记账中，标签页是通过<TagList>组件来创建的。<TagList>组件是一个无状态组件，它接收一个tags属性，该属性是一个包含所有标签的数组。

import React from 'react';

const TagList = ({ tags }) => {
  return (
    <ul>
      {tags.map((tag) => (
        <li key={tag.id}>{tag.name}</li>
      ))}
    </ul>
  );
};

export default TagList;

添加标签

接下来，我们来看看如何添加标签。在React果果记账中，标签可以通过<TagForm>组件来添加。<TagForm>组件是一个受控组件，它接收一个onSubmit属性，该属性是一个函数，当表单提交时会被调用。

import React, { useState } from 'react';

const TagForm = ({ onSubmit }) => {
  const [name, setName] = useState('');

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

    onSubmit({
      name,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="标签名"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <button type="submit">添加</button>
    </form>
  );
};

export default TagForm;

编辑标签

编辑标签与添加标签类似，我们也可以通过<TagForm>组件来编辑标签。不过，在编辑标签时，我们需要将标签的ID作为参数传递给<TagForm>组件。

import React, { useState } from 'react';

const TagForm = ({ tag, onSubmit }) => {
  const [name, setName] = useState(tag.name);

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

    onSubmit({
      id: tag.id,
      name,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="标签名"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <button type="submit">编辑</button>
    </form>
  );
};

export default TagForm;

删除标签

最后，我们来看看如何删除标签。在React果果记账中，标签可以通过<TagDeleteButton>组件来删除。<TagDeleteButton>组件是一个受控组件，它接收一个onClick属性，该属性是一个函数，当按钮被点击时会被调用。

import React from 'react';

const TagDeleteButton = ({ tag, onClick }) => {
  return (
    <button onClick={onClick}>删除</button>
  );
};

export default TagDeleteButton;