Skip to content

浅尝前端工程化&&REACT&&todoList

字数
595 字
阅读时间
3 分钟
更新日期
1/25/2019

本文记录了我使用REACT按照教程制作的todo list demo,并且使用了蚂蚁金服开源的组件库[ant.design][https://ant.design/] 修饰的过程。

参考教程

我是按照https://github.com/zhaohaodang/react-todohttps://ant.design/docs/react/introduce-cn 的教程学习,并参考了下面教程。

总结

源码开源在了 https://github.com/boy-hack/REACT-TODO

刚开始学习的时候还对js多变的语法感到恐惧,按照教程一步步写完后发现其实还行!整个项目就几处要点

  • 组件化的思想
  • npm的使用
  • React State的使用
  • React Props的使用
  • 事件的绑定

组件化思想

整个todo应用是一个大组件APP,在APP中又使用了一个子组件Todo List,Todo List下使用多个Todo Item。每个Item点击和删除都会有对应的操作。

React State

state表达某种状态,在组件中使用this.state控制,似乎它的改变可以影响组件重画render()

React Props

当父类组件传入参数进来后可以用this.props调用

事件的绑定

REACT使用jsx语法,和html类似,执行js的话用{}包括起来即可。一些变量事件都可以通过这个来传输。

例如一个点击事件

js
<Button type="default" shape="circle" icon="close" size="small" onClick={this.handleRemove.bind(this)} />

一些style也可以直接用,这个我认为非常好

js
<div style={{"margin":"30px auto",width:"850px"}}>

为什么是两个大括号包裹呢?因为第一个大括号表示它是一个js语法,下面一个大括号类似字典,让style可以接收更多参数。

一个坑

我在编辑框输入完内容后,点击add todo,编辑框的内容不会消失。普通的input标签我设置一个ref然后根据dom查找赋值就完事了,但是使用antd的组件search之后,事情变得没这么简单了…

最后解决是看了antd其他例子的一个解决方法,将value设置为state,并且使用onChange事件不断更新,最后点击后让state置空即可。

Show

撰写