Antd 是一个 UI 组件库, 与 React 非常搭
善用 UI 库, 可以节省写 CSS 样式的时间
如果我们把写 css 的时间压缩一大半, 或许就可以早点下班了~
关于 Antd
Antd 官网 https://ant.design/index-cn
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
来源: http://www.jianshu.com/p/09b4fbd399ba