随笔分类 -  React相关

something about react
封装react组件——三级联动
摘要：思路： 数据设计：省份为一维数组，一级市为二维数组，二级市/区/县为三维数组。这样设计的好处在于根据数组索引实现数据的关联。 UI组件： MUI的DropDownMenu组件或Select Field组件。将省市县数据定位常量，在UI组件里引用，通过数组遍历。 数据设计代码：（鉴于数据比较多，只列举 阅读全文
posted @ 2017-08-31 19:56 南韵 阅读(5821) 评论(4) 推荐(0)
redux相关专业名词及函数提要
摘要：redux: 用来管理react app 状态（state）的一个架构。 store: 通过createStore()创建，用来存放state，与react app是完全分离的。createStore至少有一个参数rootReducer（dispatch会调用reducer） react app通过 阅读全文
posted @ 2017-08-07 22:06 南韵 阅读(201) 评论(0) 推荐(0)
关于MUI v0.18.0版本 Table组件里的复选框不能选的解决方案
摘要：前段时间在用MUI的时候，Table组件出现复选框不能选的bug（描述： 点击复选框，点击事件会触发，复选框勾选状态无变化）。 解决方法： 用CheckBox组件代替Table组件自带的复选框。 解决思路： 1.将CheckBox分为两种，一种是表头里的全选框（以下称全选框），一种是列表行里普通的复 阅读全文
posted @ 2017-06-29 20:05 南韵 阅读(1369) 评论(0) 推荐(0)
React---点击按钮实现内容复制功能
摘要：思路： 1.给要复制的内容容器添加一个标签（可以是ID，可以是类名等），通过dom技术获取该容器对象； 2.创建Range对象（某个区域内连续的内容），把该容器对象放进去； 3.将Range对象添加到Selection对象里（以便将它暴露出来，联合document.execCommand('Copy 阅读全文
posted @ 2017-06-29 17:23 南韵 阅读(6679) 评论(0) 推荐(0)
React监听窗口变化事件
摘要：功能说明：本例子采用MUI table组件 + React实现。 需求描述：固定表头，列表高度随浏览器窗口的改变而改变。（本例中当窗口高度小于472像素后，便不作限制） 实现简介：1.监听浏览器窗口，每当窗口大小发生改变，给列表高度重新复制； 2. 列表高度通过state来管理。 关键代码： 窗口监 阅读全文
posted @ 2017-05-12 17:47 南韵 阅读(11385) 评论(1) 推荐(0)
react +MUI checkbox使用
摘要：PS:因项目采用MUI,故，在此所讲的checkbox组件为MUI里的checkbox 因checkbox组件里 oncheck函数没法判断复选框是否选中，故，若直接复用且通过state改变checked属性，会引起一选全选，不选都不选（因为这里的state掌管着所有checkbox的checked 阅读全文
posted @ 2017-04-05 19:15 南韵 阅读(3236) 评论(0) 推荐(0)
React鼠标事件
摘要：说明：假设有一个用户名片，当鼠标滑到上面，显示用户详细信息，且用户详情卡片位置随鼠标位置改变而改变。 UI框架：Material-ui 实现思路： 1.一个用户简介组件A（用于展示用户列表）； 2.一个用户详情组件B（用于展示用户详情）； 3.在A组件里写鼠标事件，当鼠标滑到A上，显示B组件，鼠标滑 阅读全文
posted @ 2017-03-01 18:48 南韵 阅读(33862) 评论(1) 推荐(0)
初入React（一）
摘要：React：是2013年Facebook在github上的一个开源js库，它将用户界面抽象为一个个组件，再由开发者将其组合成页面。它不是完整的MVC/MVVM框架，专注于提供清晰、简洁的view层解决方案，尽可能让用户使用原生js开发。其特点是通过生成Virtual Dom(js对象树)提升了应用性 阅读全文
posted @ 2017-02-24 16:42 南韵 阅读(276) 评论(0) 推荐(0)