用React和Antd类组件打造专属TodoList，助力工作生活井然有序

2023-10-20 07:38:53

使用 React 和 Antd 创建高效的 TodoList 类组件

在当今快节奏的数字化世界中，任务管理已成为现代工作和生活不可或缺的一部分。随着技术的发展，各种任务管理工具层出不穷，但真正适合自己且高效实用的却屈指可数。本文将为您介绍如何使用 React 和 Antd 创建一个专属于您的 TodoList 类组件，让任务管理变得更加轻松便捷。

什么是 React 和 Antd？

React 是一个流行的 JavaScript 库，用于构建用户界面。它以其声明式编程和虚拟 DOM 的优势而备受青睐。Antd 是一款基于 React 实现的企业级 UI 组件库。它提供了丰富的 UI 组件，可帮助您快速搭建出美观且功能强大的用户界面。

创建 React+Antd TodoList 类组件

项目初始化：

首先，创建一个新的 React 项目。您可以使用 create-react-app 工具或其他您熟悉的项目创建工具。

安装 Antd：

使用 npm 或 yarn 安装 Antd。

npm install antd

创建 TodoList 类组件：

在项目中创建一个新的类组件文件，例如 TodoList.js，并编写以下代码：

import React, { Component } from 'react';
import { Input, Button, List } from 'antd';

class TodoList extends Component {
  state = {
    todos: [],
    inputValue: '',
  };

  handleChange = (e) => {
    this.setState({
      inputValue: e.target.value,
    });
  };

  handleAddTodo = () => {
    const { todos, inputValue } = this.state;
    if (inputValue) {
      this.setState({
        todos: [...todos, inputValue],
        inputValue: '',
      });
    }
  };

  render() {
    const { todos, inputValue } = this.state;
    return (
      <div>
        <Input value={inputValue} onChange={this.handleChange} />
        <Button type="primary" onClick={this.handleAddTodo}>添加</Button>
        <List
          size="large"
          bordered
          dataSource={todos}
          renderItem={item => <List.Item>{item}</List.Item>}
        />
      </div>
    );
  }
}

export default TodoList;

使用 TodoList 类组件：

在项目的主组件中，导入 TodoList 类组件并将其渲染到页面上。

import React from 'react';
import TodoList from './TodoList';

const App = () => {
  return (
    <div>
      <TodoList />
    </div>
  );
};

export default App;