React + Antd实现简单的todolist

3,357 阅读3分钟

工作中使用vue居多,今天使用 react 来实现一个简易版的 todolist,顺便熟悉一下antd。 项目地址

1. 使用create-react-app创建项目

npx create-react-app antd-todolist

2. 安装antd并配置按需加载和less

  1. 安装antd
yarn add antd

2.引入 react-app-rewired 并修改 package.json 里的启动配置

yarn add react-app-rewired customize-cra

修改package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },
  1. 配置
  • 使用babel-plugin-import用于按需加载
yarn add babel-plugin-import
  • 引入less
yarn add less less-loader
  • 新建config-overrides.js用来修改默认配置
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true
  }),
);
  1. 在App.js里面引入button组件
import React from 'react';
import {Button} from 'antd'

function App() {
  return (
    <div className="App">
      <Button type="primary">点击</Button>
    </div>
  );
}

export default App;

  1. 重启
yarn start

3. todoList

  1. 新建项目结构

2. 新建初始数据data.js

const list = [
  {
    id: '123',
    content: '周一活动ABC',
    isComplete: false
  },
  {
    id: 'abc',
    content: '周二活动ABC',
    isComplete: true
  },
  {
    id: '345',
    content: '周三活动ABC',
    isComplete: false
  }
]

export default list;

  1. TodoList.js引入antd组件基础布局TodoList.js,父子组件之间的数据传递通过this.props
import React, { Component } from 'react';
import { Layout } from 'antd';
import Form from './components/Form';
import DataList from './components/DataList';
import Footer from './components/Footer';
import datas from './data'
import './todolist.less'

const { Header, Content} = Layout;

class TodoList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      list: []
    }
  }
  componentDidMount () {
    this.setState({
      list: datas
    })
  }

  deleteItem (id) {
    let deleteIndex = datas.findIndex(item => {
      return item.id === id
    })
    datas.splice(deleteIndex, 1)
    this.setState({
      list: datas
    })
  }

  changeItem (id) {
    let changeIndex = datas.findIndex(item => {
      return item.id === id
    })
    datas[changeIndex].isComplete = !datas[changeIndex].isComplete
    this.setState({
      list: datas
    })
  }

  handleSearchItem(value) {
    let newList = datas.filter(item => {
      return item.content.indexOf(value) !== -1
    })
    this.setState({
      list: newList
    })
  }

  addItem (item) {
    datas.push(item)
    this.setState({
      list: datas
    })
  }

  render () {
    return (
      <Layout className="todolist-layout">
        <Header>
        <h3 className="logo">TodoList</h3>
        </Header>
        <Content className="todolist-content">
          <Form searchItem={value => this.handleSearchItem(value)}></Form>
          <DataList list={this.state.list} deleteItem={id => this.deleteItem(id)} changeItem={id => this.changeItem(id)}></DataList>
          <Footer addItem={item => this.addItem(item)}></Footer>
        </Content>
      </Layout>
    )
  }
}

export default TodoList;
  1. TodoItem.js具体的数据展示组件,分为内容展示,状态显示,删除等内容。双击改变状态,点击删除按钮删除该条数据
import React, { Component } from 'react';
import { Typography, Button } from 'antd';
import './TodoItem.less'

const { Text } = Typography;

class TodoItem extends Component {
  handleDeleteItem (id) {
    this.props.deleteItem(id)
  }

  handleChangeItem (id) {
    this.props.changeItem(id)
  }

  render () {
    let {content, isComplete, id} = this.props
    return (
      <div className="item-container" onDoubleClick={() => this.handleChangeItem(id)} style={{cursor: 'pointer'}}>
        <Text delete={isComplete}>{content}</Text>
        <Button type="primary" icon="delete" onClick={() => this.handleDeleteItem(id)}></Button>
      </div>
    )
  }
}

export default TodoItem;
  1. DataList.js列表组件
import React, { Component } from 'react';
import TodoItem from './TodoItem'
import { List } from 'antd';

class DataList extends Component {
  deleteItem (id) {
    this.props.deleteItem(id)
  }

  changeItem (id) {
    this.props.changeItem(id)
  }

  render () {
    let data = this.props.list
    return (
      <List
        bordered
        dataSource={data}
        renderItem={item => (
            <List.Item>
              <TodoItem deleteItem={id => this.deleteItem(id)} changeItem={id => this.changeItem(id)} {...item}/>
            </List.Item>
        )}
      />
    )
  }
}

export default DataList;
  1. Form.js 搜索组件,在输入框输入内容点击按钮进行查看,实际是按条件对数据进行过滤
import React, { Component } from 'react';
import { Input } from 'antd';

const Search = Input.Search;

class Form extends Component {

  handeChange (value) {
    this.props.searchItem(value)
  }

  render () {
    return (
      <Search
        placeholder="请输入搜索内容"
        style={{marginBottom: '8px'}}
        onSearch={value => this.handeChange(value)}
        enterButton
      />
    )
  }
}

export default Form;
  1. Footer.js显示新增按钮,点击后显示输入框,确认提交后,添加数据,输入框消失显示新增按钮
import React, { Component } from 'react';
import { Button } from 'antd';
import { Input } from 'antd';

class Footer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isAdd: false,
      addContent: ''
    }
  }

  handleClick () {
    this.setState({
      isAdd: true
    })
  }

  handleChange (e) {
    this.setState({
      addContent: e.target.value
    })
  }

  handleConfirm () {
    if(!this.state.addContent) return
    let item = {
      id: new Date(),
      content: this.state.addContent,
      isComplete: false
    }
    this.props.addItem(item)
    this.setState({
      isAdd: false
    })
  }

  render () {
    let addBtn = <Button type="primary" onClick={this.handleClick.bind(this)}>新增</Button>
    let addComponent = <div style={{display: 'flex'}}>
                        <Input onChange={e => this.handleChange(e)} style={{marginRight: '10px'}}/>
                        <Button type="primary" onClick={this.handleConfirm.bind(this)}>确认</Button>
                      </div>
    let component = this.state.isAdd ? addComponent : addBtn
    return (
      <div style={{marginTop: '10px'}}>
        {component}
      </div>
    )
  }
}

export default Footer;

相关:React + Antd + Redux改进之前简单的todolist

React + Antd + Mobx改进之前简单的todolist