react如何使用Antd完成todolist

最新推荐文章于 2023-04-09 10:50:20 发布

mini74

最新推荐文章于 2023-04-09 10:50:20 发布

阅读量402

点赞数

文章标签： react

本文链接：https://blog.csdn.net/mini74/article/details/104633795

版权

本文介绍如何使用Ant Design组件库创建一个简单的To-Do List应用。首先通过npm安装antd，然后从官网查找所需组件。示例代码展示了如何使用Input、Button和List组件来构建应用。

摘要由CSDN通过智能技术生成

首先需要安装antd，在控制台输入npm install antd --save即可完成安装。
进入antd design官网https://ant.design/docs/react/introduce-cn即可查询你所需要的组件
搜索自己需要的组件之后，按照以下方式即可获取。
在这里插入图片描述
todolist完整代码：

import React,{ Component,Fragment } from 'react';
import "antd/dist/antd.css";
import { Input,Button,List } from "antd";
const data = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
];

class TodoList extends Component {
    render() {
        return (
           <Fragment>
               <Input placeholder="Basic usage" style={{width:300}} value={this.state.inputValue}/>
               <Button>Default</Button>
               <List
                   style={{width:300,marginTop:20}}
                   bordered
                   dataSource={data}
                   renderItem={item => (
                       <List.Item>
                           {item}
                       </List.Item>
                   )}
               />
           </Fragment>
        )
    }
}
export default TodoList;