React + Antd实现简单的todolist

工作中使用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"
  },
复制代码

3. 配置

• 使用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
  }),
);
复制代码

4. 在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;

复制代码

5. 重启

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;

复制代码

3. 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;
复制代码

4. 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;
复制代码

5. 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;
复制代码

6. 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;
复制代码

7. 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;
复制代码