- Antd是一个UI组件库, 与React非常搭
- 善用UI库, 可以节省写css样式的时间
- 如果我们把写css的时间压缩一大半, 或许就可以早点下班了~
关于Antd
- Antd Github地址: https://github.com/ant-design/ant-design
antd怎么用?
- 安装antd
npm install antd -S
- 在react组件中引入antd及其部分组件
import 'antd/dist/antd.css';
import { Input, List, Tag, Switch} from 'antd';
- 在react组件中使用antd(以标签为例)
{/*这里的item是一个数组*/}
<Tag color="orange" style={{position: "absolute", right: 0}}>创建日期: {item[2]}</Tag>
用antd写一个待办清单
- 自动添加创建日期
- 支持任务的开启关闭(点击switch组件或点击文字)
- 支持删除任务(在关闭状态下点击任务文字)
核心组件源码
import React, { Component } from 'react';
import './App.css';
import 'antd/dist/antd.css';
import { Input, List, Tag, Switch} from 'antd';
class App extends Component {
constructor(props){
super(props);
this.state = {
list: [],
inputValue: ''
}
this.addContent = this.addContent.bind(this);
this.handleInputValue = this.handleInputValue.bind(this);
this.removeItem = this.removeItem.bind(this);
this.handleNewTodoKeyDown = this.handleNewTodoKeyDown.bind(this);
this.getCurrentDate = this.getCurrentDate.bind(this);
}
componentDidMount(){
// 页面加载后自动聚焦
this.nameInput.focus();
}
// 将输入框内容添加到列表
addContent() {
let tmpValue = this.state.inputValue
// 内容为空无法添加
if (tmpValue === "") {
return
}
// 获取当前时间
let tmpDate = this.getCurrentDate()
let tmpList = JSON.parse(JSON.stringify(this.state.list));
tmpList.unshift([tmpValue, 0, tmpDate])
// 清空输入框内容
this.setState({inputValue: ''});
// 重新渲染列表
this.setState({list: tmpList})
// 重新聚焦
this.nameInput.focus();
}
// 将实时输入的内容进行绑定
handleInputValue(event) {
let tmpInputValue = event.target.value;
this.setState({inputValue: tmpInputValue});
}
// 获取当前时间的dom
getCurrentDate(){
// 添加创建日期
let dt = new Date()
let year = dt.getFullYear();
let month = dt.getMonth();
let day = dt.getDate();
let hour = dt.getHours();
let minute = dt.getMinutes();
let second= dt.getSeconds();
// 将月份加1
month = month + 1;
if (month <= 9){month = "0" + month;}
if (day <= 9){day = "0" + day;}
if (hour <= 9){hour = "0" + hour;}
if (minute <= 9){minute = "0" + minute;}
if (second <= 9){second = "0" + second;}
let creteData = year+ "年" + month+ "月" + day+ "日" + hour+ "时" + minute+ "分" + second+ "秒";
return creteData
}
// 移除被点击的内容
removeItem(index){
let tmpListdata = JSON.parse(JSON.stringify(this.state.list))
// 切割出一个元素的数组
let tmpItem = tmpListdata.splice(index, 1);
// 被点击的元素索引加1
tmpItem[0][1] += 1;
// 一次划线
if (tmpItem[0][1] === 1){
// 将元素补回
tmpListdata.splice(index, 0, ...tmpItem);
}
// 更新列表数据
this.setState({list: tmpListdata});
}
// 捕捉回车动作
handleNewTodoKeyDown(event) {
let ENTER_KEY = 13;
if (event.keyCode === ENTER_KEY) {
this.addContent();
}
}
// 处理开关按钮
handleSwitch(index){
let tmpList = JSON.parse(JSON.stringify(this.state.list));
tmpList[index][1] = tmpList[index][1] ? 0 : 1;
this.setState({list: tmpList});
}
render() {
return (
<div className="App">
<Input
style = {{marginTop: 20, marginBottom: 20}}
className="app-input" size="large" placeholder="请输入待办事项(回车添加)"
onChange={this.handleInputValue.bind(this)}
value={this.state.inputValue}
onKeyDown={this.handleNewTodoKeyDown}
ref={(input) => { this.nameInput = input; }} />
<List
size="large"
bordered
dataSource={this.state.list}
style={{color: "#4091F7", fontWeight: "bold"}}
renderItem={
(item, index) => (
<List.Item>
<Switch style={{marginRight: 20}} onChange={this.handleSwitch.bind(this, index)} checked = {item[1] ? false : true} />
<Tag color="orange" style={{position: "absolute", right: 0}}>创建日期: {item[2]}</Tag>
<div onClick={this.removeItem.bind(this, index)} style={{cursor:"pointer"}}>
{item[1] ? <div style={{textDecoration:"line-through"}}>{item[0]}</div> : <div>{item[0]}</div>}
</div>
</List.Item>)
}
/>
</div>
);
}
}
export default App;
为便于管理, 相关资源整合到一张独立的帖子，链接如下:
http://www.jianshu.com/p/4f28e1ae08b1
