React：记账本03---标签页，打造自定义标签管理系统

2023-09-03 04:23:13

前言

标签页是一个非常有用的组件，它可以帮助我们对数据进行分类和管理。在记账本项目中，标签页可以用来对账单进行分类，比如收入、支出、娱乐等。

标签页的实现

1. 首先，我们需要定义一个`Tag`组件。

const Tag = ({ tag, onDelete }) => {
  return (
    <li>
      <span>{tag}</span>
      <button onClick={onDelete}>删除</button>
    </li>
  );
};

这个组件很简单，它只是显示一个标签和一个删除按钮。

2. 接下来，我们需要定义一个`Tags`组件。

const Tags = ({ tags, onAddTag, onDeleteTag }) => {
  return (
    <div>
      <ul>
        {tags.map((tag) => (
          <Tag key={tag} tag={tag} onDelete={() => onDeleteTag(tag)} />
        ))}
      </ul>
      <button onClick={onAddTag}>添加标签</button>
    </div>
  );
};

这个组件稍微复杂一些。它包含一个列表，用来显示所有的标签。它还有一个按钮，用来添加新的标签。

3. 最后，我们需要定义一个`useTags`自定义hook。

const useTags = () => {
  const [tags, setTags] = useState<string[]>([]);

  const addTag = (tag: string) => {
    setTags([...tags, tag]);
  };

  const deleteTag = (tag: string) => {
    setTags(tags.filter((t) => t !== tag));
  };

  return { tags, addTag, deleteTag };
};

这个自定义hook是一个状态管理工具，它可以帮助我们管理标签。它包含一个状态变量tags，用来存储所有的标签。它还包含两个函数addTag和deleteTag，用来添加和删除标签。

4. 在组件中使用`useTags`自定义hook

const App = () => {
  const { tags, addTag, deleteTag } = useTags();

  return (
    <div>
      <h1>标签页</h1>
      <Tags tags={tags} onAddTag={addTag} onDeleteTag={deleteTag} />
    </div>
  );
};