02 2018 档案
摘要:在HTML中用js获取通过GET、POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值。 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为 公用方法直接调用。可以提高大家的开发效率。 html: <body> <form id="login" n
阅读全文
摘要:1.代码 2.效果图 注:目前只支持IE
阅读全文
摘要:对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 方法1:使用JQuery的extend方法 **方法定义**:jQuery.extend([deep], target, object1, [objectN]) > 用一个或多个其他对象来扩展一个对象,返回被扩展的对象。 > 如果不指定t
阅读全文
摘要:如果只使用redux,那么流程是这样的: component --> dispatch(action) --> reducer --> subscribe --> getState --> component 用了react-redux之后流程是这样的: component --> actionCr
阅读全文
摘要:现在我们需要一个页面来展现数据库中记录的用户。 在/src/pages下新建UserList.js文件。 创建并导出UserList组件: 当页面加载的时候需要调用接口来获取用户列表,并把获取到的用户列表数据存放到组件的state中(this.state.userList): 在render方法中,
阅读全文
摘要:高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能。 我们现在已经有了带有表单校验功能的添加用户的表单,这里的表单有3个字段:name、age、gender,并且每个字
阅读全文
摘要:我们需要记录每一个字段当前的有效状态,有效时隐藏错误信息,无效时显示错误信息。 而这个有效/无效,可以在表单值改变的时候进行判断。 我们对/src/pages/UserAdd.js进行修改: 首先修改了state的结构,把每个表单的值都放到了一个form字段中,方便统一管理;然后每个表单的值都变为了
阅读全文
摘要:1.安装 路由 2.新增页面 我们现在的应用只有一个Hello React的页面,现在需要添加一个用于添加用户的页面。 首先在/src目录下新增一个pages目录,用于存放渲染页面的组件。 然后在/src/pages中新增一个UserAdd.js文件。 在这个文件中写入一个基本的React组件: 3
阅读全文
摘要:1.安装 React社区提供了众多的脚手架,这里我们使用官方推荐的create-react-app。 注:create-react-app 脚手架默认隐藏 config 文件夹,需要通过 导出可配置的模板 2.服务端搭建 这里我们借助json-server这个工具快速搭建后台管理系统的服务端程序:
阅读全文
摘要:首先,redux并不是必须的,它的作用相当于在顶层组件之上又加了一个组件,作用是进行逻辑运算、储存数据和实现组件尤其是顶层组件的通信。如果组件之间的交流不多,逻辑不复杂,只是单纯的进行视图的渲染,这时候用回调,context就行,没必要用redux,用了反而影响开发速度。但是如果组件交流特别频繁,逻
阅读全文
摘要:react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: 配置: app组件: path属性: path属性也可以使用相对路径(不以/开头),匹配时就会相对于父组件的路径。路由匹配规则是从上到下执行,一旦发现匹配,就不再其余的规则了。 编程式导航: hashHistory 接收参数: 此
阅读全文
摘要:组件在初始化时会触发5个钩子函数: 1、getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性。 2、getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.stat
阅读全文
摘要:React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。 使用方法 绑定一个 ref 属性到 rende
阅读全文
摘要:一个简单的实例 在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改 state。 上面的代码将渲染出一个值为 Hello World 的 in
阅读全文
摘要:React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成
阅读全文
摘要:组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用,
阅读全文
摘要:设置状态:setState替换状态:replaceState设置属性:setProps替换属性:replaceProps强制更新:forceUpdate获取DOM节点:findDOMNode判断组件挂载状态:isMounted 设置状态:setState 参数说明 nextState,将要设置的新状
阅读全文
摘要:state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 使用 Props 以下实例演示了如何在组件中使用 props: 实例中 name
阅读全文
摘要:React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。 React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。 以下实例中创建了 LikeButton 组件,
阅读全文
摘要:谈及React时,就会想到一个很重要的思想,就是组件化思想。它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介绍下组件之间传递信息的方法。 组件之间传递信息方式,总体可分为以下5种: 1.(父组件)向(子组件)
阅读全文
摘要:解析React 方法一、使用webpack 在package.json添加 安装依赖 或者直接 在你编写的react组件文件里 在你的入口文件里 其他事情就交给webpack去做吧。、 方法二、在页面载入解析文件 这种方法更方便,但是不利用实际开发,平时练习也就算了。 Jsx语法 组件类的第一个字母
阅读全文
摘要:“Missing semicolon.” : “缺少分号.”, “Use the function form of \”use strict\”.” : “使用标准化定义function.”, “Unexpected space after ‘-’.” : “在’-'后面不应出现空格.”, “Exp
阅读全文
摘要:1.创建组件 SqueezeBox.vue 2.页面调用 3.效果图
阅读全文
摘要:1.计算日期差 Mine.vue 2.效果图
阅读全文
摘要:1.App.vue 2.效果图 3.其他情况 .
阅读全文
摘要:react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库。 在create-react-app建的项目目录中安装react-bootstrap。 安装bootstrap。 在index.js文件中增加css
阅读全文