工作中使用vue居多，今天使用 react 來實現一個簡易版的 todolist，順便熟悉一下antd。 專案地址
1. 使用create-react-app建立專案
npx create-react-app antd-todolist
複製程式碼2. 安裝antd並配置按需載入和less
- 安裝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"
},
複製程式碼- 配置
- 使用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
}),
);
複製程式碼- 在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;
複製程式碼- 重啟
yarn start
複製程式碼3. todoList
- 新建專案結構
const list = [
{
id: '123',
content: '週一活動ABC',
isComplete: false
},
{
id: 'abc',
content: '週二活動ABC',
isComplete: true
},
{
id: '345',
content: '週三活動ABC',
isComplete: false
}
]
export default list;
複製程式碼- 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;
複製程式碼- 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;
複製程式碼- 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;
複製程式碼- 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;
複製程式碼- 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;
複製程式碼