React
关注
分享
扫一扫
文章平均质量分 62
iteye_13003
这个作者很懒，什么都没留下…
展开
-
Warning: `value` prop on `input` should not be null.
// console报错信息如下Warning: `value` prop on `input` should not be null. Consider using the empty string to clear the component or `undefined` for uncontrolled components. in input (created by ...原创 2016-12-12 13:15:34 · 3701 阅读 · 0 评论 -
React 获取虚拟dom节点的两种方法
第一种常规做法：<div className="confirm-money" ref="totalNeedPayRef"> { totalNeedPay }</div>import React from 'react';import { findDOMNode } from 'react-dom';const { totalNeedPa...原创 2016-11-18 16:08:29 · 2598 阅读 · 0 评论 -
React&Js实现无刷新搜索后隐藏键盘[兼容IOS&Android]
搜索框效果： React Html：<form onSubmit={e => this.searchItem(keyword, e)}> <img src="./images/icons/search-icon.png" className="search-icon" /> <input type="search" autoFocu..原创 2016-10-28 14:23:19 · 472 阅读 · 0 评论 -
React一个完整组件的定义以及绑定事件的优化
// 文件命名：switchBtn.jsx (以项目命名规则为准)// 导入所需字段import React, { Component, PropTypes } from 'react';// 声明组件名称以及继承关系class SwitchBtn extends Component { // 构建函数，继承父类 constructor(props)...原创 2016-08-29 10:59:54 · 409 阅读 · 0 评论 -
react-router 返回顶部的两种方式
当我们使用react-router给项目带来便利的同时，也会遇到各种不顺的问题，比如当我们从A页面进入B页面的时候，由于共享了同一个history，导致浏览的位置也被记录下来的，这样A页面滑动到底部了，进入B页面也在底部，也显然不符合我们的浏览习惯。还好react-router提供相应的事件配置我们正常开发：方案一 onUpdate： <Router onUpdate={...原创 2016-08-24 16:07:38 · 2478 阅读 · 0 评论 -
React confim popup components 弹出确认框组件的实现
先来张效果图：1.Components// componentsimport React from 'react';import { Link } from 'react-router';class ConfirmWins extends React.Component { constructor() { super(); } ren...原创 2016-06-03 16:43:55 · 2508 阅读 · 0 评论 -
React Uncaught TypeError: _react2.default.unmountComponentAtNode is not a functi
React报错提示:Uncaught TypeError: _react2.default.unmountComponentAtNode is not a function 报错原因:React版本过高，不支持React.renderReact.unmountComponentAtNode(wrapper); 解决方案:1.降级React版本2.使...原创 2016-05-31 15:20:33 · 1017 阅读 · 0 评论 -
React Uncaught TypeError: _react2.default.findDOMNode is not a function
React报错提示:Uncaught TypeError: _react2.default.findDOMNode is not a function 报错原因:React版本过高，不支持React.renderReact.findDOMNode(this.refs.confirm).focus(); 解决方案:1.降级React版本2.使用Re...原创 2016-05-31 15:19:18 · 685 阅读 · 0 评论 -
React Uncaught TypeError: _react2.default.render is not a function
React报错提示:Uncaught TypeError: _react2.default.render is not a function 报错原因:React版本过高，不支持React.renderReact.render(<Confirm {...props}/>, wrapper); 解决方案:1.降级React版本2.使用R...原创 2016-05-31 15:17:36 · 839 阅读 · 0 评论 -
React <Component> is changing a controlled input of type text to be uncontrolled
React警告提示: warning.js:44 Warning: AddAddress is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). ...原创 2016-05-30 20:11:29 · 717 阅读 · 0 评论 -
React显示原生css style样式在dom对象里
react设置style是需要一个object对象的var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is ...原创 2016-05-23 17:24:55 · 1413 阅读 · 0 评论 -
【解决】React setState延迟delay导致数据更新不及时，代码无法正确执行
之前React setState后在另一个函数调用state的值没有更新： // init state.type = 'new';activeMenu(type) { // type = top if (type == this.state.type) return; this.loadList(type);}loadList(type) { ...原创 2016-05-12 18:41:19 · 7364 阅读 · 1 评论 -
React Uncaught Invariant Violation: ReactMount: Two valid but unequal nodes with
报错提示：invariant.js:39 Uncaught Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.2.4.0.$117405.0 报错原因： 由于你的React代码包含了双重点击事件或者，A标签里面嵌套了A标签或onC...原创 2016-05-11 17:50:07 · 417 阅读 · 0 评论 -
React Uncaught Invariant Violation: onlyChild must be passed a children with exa
报错提示： Uncaught Invariant Violation: onlyChild must be passed a children with exactly one child. 报错代码： pmessage = this.state.showmessage?<div className="pmessage">{this.state.pme...原创 2016-05-11 12:03:27 · 678 阅读 · 0 评论 -
React addons.update setState 链式更新object属性
在上一篇文章里，我使用纯js更新object对象，然后在setState里面，这样操作属于原生的，今天在解读React.addons对象的时候，发现有update函数也可以链式更新对象，挺方便的，就是解读起来不那么容易。import React from 'react';// 经过种种setState， detail对象是这样的：this.state.detail.itemin...原创 2016-04-26 17:34:21 · 534 阅读 · 0 评论 -
Gulp watch error Error: watch /home/react-mobile/stylus/ ENOSPC
'watch' errored after 19 ms[13:25:21] Error: watch /home/react-mobile/stylus/ ENOSPC at exports._errnoException (util.js:870:11) at FSWatcher.start (fs.js:1234:19) at Object.fs.wat...原创 2016-04-25 13:32:26 · 514 阅读 · 0 评论 -
React 处理form表单input输入项双向数据绑定
<form method="post" autoComplete="off" encType="multipart/form-data" onSubmit={this.onSubmit.bind(this)}> <div className={ 'title bl-line' + (state.activeInput == 'subject' ? ' active...原创 2016-04-12 18:51:26 · 2012 阅读 · 0 评论 -
React 更新数据array子项添加新的属性便于循环处理
// 初始化数据this.state = { comments: []} // 添加新的属性showReplyInfo(index) { let items = this.state.comments; let item = items[index]; item.isLogin = this.state.isLogin; item.showRe...原创 2016-04-12 18:47:07 · 1671 阅读 · 0 评论 -
React 动态更新子项item从array数据
// 初始化statethis.state = { files: [],}// 添加数据到arraythis.setState({ files: [ ...this.state.files, fileInfo ]});// 动态移除子项从arrayremovePic(index) { this.setState...原创 2016-04-12 18:44:43 · 1101 阅读 · 0 评论 -
React 级联下拉列表实现
// 数据结构{"status": "200","data": {"groups": [{"name": "官方专区","todayposts": "0","gid": "1"},{"name": "理财有道",&quo原创 2016-04-12 18:39:26 · 4555 阅读 · 0 评论 -
React state从数组中动态移除子项item
1、当我们动态操作state的适合，遇到移除一个子项，需要更新数组的state// set statethis.state = { files: []}// add itemthis.setState({ files: [ ...this.state.files, fileInfo ] })...原创 2016-04-01 14:48:51 · 5945 阅读 · 0 评论 -
React/JS/Es6 多重/双层循环数组/Object/Map
1、数据源：var module = [ { "1": [ { "name": "公告区", "todayposts": "0", "fid": "2" }, { "name": "产品动态",原创 2016-03-31 14:01:28 · 4723 阅读 · 0 评论 -
React setState更新数组中的某个元素Element item
invariant.js:39 Uncaught Invariant Violation: findComponentRoot(..., .0.0.0.1.1.$12.0.2.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usual...原创 2016-03-15 17:29:08 · 11024 阅读 · 0 评论 -
React Render运行绑定并显示HTML标签内容
默认情况下，React Render不允许插入html标签的，为了避免xss攻击<div className='body'> {this.props.description}</div> 所以上面默认情况下你这样使用都是不能显示换行功能的：confirm('Are you sure?', { description: '遇到点...原创 2016-01-08 14:02:23 · 1948 阅读 · 0 评论 -
React实现Angularjs ng-show、ng-if和ng-hide
添加一段用户登录场景，登录显示登录信息，否则显示非登录信息。使用Angularjs我们可以这样做：<div class="logined" ng-show="isLogin">登录了</div><div class="logined" ng-if="isLogin">你好，{userName}</div>原创 2016-01-07 15:41:07 · 343 阅读 · 0 评论 -
React实现Angularjs ng-class
首先设定一段Angularjs代码的ng-class：<i class="header-help-icon down" ng-class="{up:showMenu}"></i> 比较容易理解的Angularjs ng-class设置样式代码，那我们使用React怎么去实现它呢？// 首先在state设置一个变量比如： isShowLoginMenu，在...原创 2016-01-07 15:30:55 · 360 阅读 · 0 评论 -
React调试插件 查看所有Props、State属性值
本次推荐的React插件是React Developer Tools，由Facebook官方提供 支持：检查React值变化State所有参数变化Props所有参数变化事件监听。。。。。。More这是我使用过程中的体验： 迫不及待的想下载，推送地址Chrome Store：https://chrome.google.com/webst...原创 2015-12-21 13:40:16 · 3281 阅读 · 0 评论 -
React Reflux Store获取state值 Data Flow
// Componentclass Plans extends React.Component { constructor(props){ super(props); this.state = { params: props.params }; } render() { return ( <di...原创 2015-11-19 18:37:54 · 337 阅读 · 0 评论 -
React 字符串（拼）连接+变量
Angularjs字符串拼接变量很简单，因为里面都是js操作，所以不论是 <a ng-href="http://each.sinaapp.com/angular + {{variable}}">or<a ng-href="{{'http://each.sinaapp.com/angular'+variable}}"> 可以的，而在R...原创 2015-11-09 17:14:37 · 8379 阅读 · 0 评论 -
Module build failed: ReferenceError: Promise is not defined
在家使用webpack打包的时候一次通过，在公司使用的时候报错：Module build failed: ReferenceError: Promise is not defined ERROR in ./~/css-loader!./style.cssModule build failed: ReferenceError: Promise is not defined ...原创 2015-11-09 11:40:16 · 644 阅读 · 0 评论 -
React 单页面HTML加载JSX文件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>React Plan List Version</title> </head> <body>原创 2015-11-04 19:43:37 · 800 阅读 · 0 评论 -
React 入门教程 本地开发 第一篇
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>React Plan List Version</title> </head> <body>原创 2015-11-04 19:38:33 · 153 阅读 · 0 评论