为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 少写css, 早下班!...

少写css, 早下班! Antd完成todo-list样式布局

2018.08.30 17:30 884浏览
  • Antd是一个UI组件库, 与React非常搭

  • 善用UI库, 可以节省写css样式的时间

  • 如果我们把写css的时间压缩一大半, 或许就可以早点下班了~

关于Antd

webp

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写一个待办清单

webp

  • 自动添加创建日期

  • 支持任务的开启关闭(点击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;



作者:木子昭
链接:https://www.jianshu.com/p/09b4fbd399ba


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
93
获赞与收藏
541

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

152篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消