React+Antd实现简单todolist，入门指引

前端

2024-02-10 07:11:11

轻松掌握！使用 React + Antd 构建简单 Todolist

导言

管理待办事项是提高效率的关键，而一个实用的待办事项应用程序可以简化这一过程。本文将带领你踏上利用 React 和 Antd 库构建一个简单易用的 Todolist 应用程序的旅程。

创建项目

建立 React 项目： 使用 create-react-app 工具，在终端中运行 npx create-react-app todolist 创建一个名为 todolist 的新项目。
安装并配置 Antd： 通过 npm install antd 安装 Antd，并在 src 目录中创建一个名为 antd.less 的文件，导入 ~antd/dist/antd.less 以配置样式。

实现 Todolist 功能

创建数据源： 在 data.js 中创建一个数组，包含包含待办事项的示例数据。
构建 TodoList 组件： 使用 TodoList.js 创建一个组件，它将动态渲染待办事项列表，并提供完成和删除功能。
添加 Todo 表单组件： 在 TodoForm.js 中创建一个组件，它允许用户添加新的待办事项。
整合组件： 在 App.js 中组装组件，创建一个包含 Todolist 和添加表单的应用程序界面。

代码示例

// data.js
const data = [
  { id: 1, title: '学习 React', completed: false },
  { id: 2, title: '学习 Antd', completed: false },
];

// TodoList.js
import { List, Checkbox, Button } from 'antd';

const TodoList = ({ todos, handleToggleCompleted, handleDeleteTodo }) => {
  return (
    <List
      dataSource={todos}
      renderItem={item => (
        <List.Item>
          <Checkbox checked={item.completed} onChange={() => handleToggleCompleted(item.id)} />
          <span>{item.title}</span>
          <Button type="primary" onClick={() => handleDeleteTodo(item.id)}>删除</Button>
        </List.Item>
      )}
    />
  );
};

// TodoForm.js
import { Input, Button } from 'antd';

const TodoForm = ({ addTodo }) => {
  const [title, setTitle] = useState('');

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

    addTodo(title);
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="添加一个待办事项" />
      <Button type="primary" htmlType="submit">添加</Button>
    </form>
  );
};