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;
複製代碼

相關：React + Antd + Redux改進以前簡單的todolist

React + Antd + Mobx改進以前簡單的todolist