js达成原生js拖拽效果及思维,js深刻学习详细剖析

React.js完结原生js拖拽效果及思维

2016/07/16 · JavaScript
· ReactJS

本文作者: 伯乐在线 –
winty
。未经笔者许可,禁止转发!
迎接参预伯乐在线 专辑小编。

一、起因&思路

无意,已经好几天没写博客了。。。近年来除了探讨React,还做了商行官网。。。

平昔想写三个原生js拖拽效果,又加上近期学react学得对比嗨。所以就用react来落实那么些拖拽效果。

率先,其实拖拽效果的思绪是很简短的。首要就是多个步骤:

1.onmousedown的时候,运转可拖拽事件,记录被拖拽成分的原始坐标参数。

2.onmousemove的时候,实时记录鼠标移动的离开,结合被拖拽成分第三阶段的坐标参数,总括并安装新的坐标值。

3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值。

专注:那里最首借使由此相对定位的top和left来鲜明因素的职位的,由此被拖拽成分的css一定要设置相对定位。

二 、协理理工科程师具

扶助理工科程师具主要便是是付出进程变得非常快,而且酷炫的。在那几个demo中,要给咱们推荐3个gulp+browser-sync的开发工具,gulp有许多效用,在这么些demo中gulp的法力重点是能够安装实时编写翻译react中的jsx文件,当然假诺您写css用的是sass,也能够安装实时编写翻译sass。用browser-sync这些吧,首要就是足以活动实时刷新页面,我们日常做页面,看效果的时候,平日都是由此F5来刷新浏览器,然后看到页面包车型大巴。但是用了那一个插件,你写完代码的时候,只要按下,ctrl+s保存,新的效能就会自动在浏览器中刷新,然后看收获了。

用法详解:

安装:

1.在node的环境下,安装gulp,那里就一窍不通说了,具体进程可参照笔者的博文《react.js入门必须领会的那么些事》

2.装置gulp-livereload,在命令行只怕git bash ,输入npm install
–save-dev gulp-livereload

3.装置gulp-watch,在命令行也许git bash ,输入npm install
–save-dev gulp-watch

4.装置browser-sync,在命令行或许git bash ,输入npm install
–save-dev browser-sync

配置及表明如图:

美高梅开户网址 1

叁 、定义组件营造页面

备考:那里的代码表明均在react相关模块安装好的处境下,安装进度见本人的博文《react.js入门必须了然的那多少个事》.

效果图:

美高梅开户网址 2

组件拆分思路:

自笔者立时以为组件拆分得细一点好,所以作者把input、button分别做成了3个零部件:

JavaScript

var React=require(‘react’); var MyInput=React.createClass({
render:function(){ return ( <div className=”form-group”> <label
htmlFor={this.props.labelId} className=”col-sm-2
control-label{this.props.labelTip</label> <div
className=”col-sm-10″> <input name={this.props.name}
type={this.props.type} onChange={this.props.onChange}
className=”form-control” id={this.props.labelId}
placeholder={this.props.placeholder}/> </div> </div> ); }
}); module.exports=MyInput;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var React=require(‘react’);
var MyInput=React.createClass({
  render:function(){
    return (
    <div className="form-group">
        <label htmlFor={this.props.labelId} className="col-sm-2 control-label{this.props.labelTip</label>
        <div className="col-sm-10">
             <input name={this.props.name} type={this.props.type} onChange={this.props.onChange} className="form-control" id={this.props.labelId} placeholder={this.props.placeholder}/>
        </div>
    </div>
  );
  }
});
 
module.exports=MyInput;

JavaScript

var React=require(‘react’); var Button=React.createClass({
render:function(){ return ( <button type={this.props.type}
className=”loginButton”>{this.props.ButtonTip}</button> ); } })
module.exports=Button;

1
2
3
4
5
6
7
8
9
10
11
var React=require(‘react’);
var Button=React.createClass({
    render:function(){
        return (
            <button type={this.props.type} className="loginButton">{this.props.ButtonTip}</button>
        );
    }
})
module.exports=Button;

鉴于input有不少都是急需钦定的,那种景色下,如若像笔者那样定义必要传太多参数,而且事实上登陆的input大多都以永恒且没须要复用的,所以那样事实上相当的小好。那里的input直接写比较好。

写好现在的父组件:

JavaScript

render:function(){ return ( <form className=”form-horizontal”
id=”form” ref=”drag博克斯” onSubmit={this.submitHandler}
onMouseMove={this.move} onMouseUp={this.endDrag}> <DragArea
callbackParent={this.onChildChanged} /> <div id=”form-wrap”>
<MyInput name=”username” labelId={“userId”} labelTip={“用户名”}
type={“text”} placeholder={“请输入用户名”} value={this.state.username}
onChange={this.handleChange}/> <MyInput name=”password”
labelId={“pw”} labelTip={“密码”} type={“password”}
placeholder={“请输入密码”} value={this.state.password}
onChange={this.handleChange}/> <div className=”form-group”>
<div className=”col-sm-offset-2 col-sm-10″> <div
className=”checkbox”> <label> <input name=”checked”
type=”checkbox” checked={this.state.checked}
onChange={this.handleChange} /> 记住小编 </label> </div>
</div> </div> <MyButton type={“submit”}
ButtonTip={“登陆”}/> </div> </form> );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
render:function(){
   return (
    <form className="form-horizontal" id="form"  ref="dragBox" onSubmit={this.submitHandler} onMouseMove={this.move} onMouseUp={this.endDrag}>
    <DragArea callbackParent={this.onChildChanged} />
    <div id="form-wrap">
    <MyInput name="username" labelId={"userId"} labelTip={"用户名"} type={"text"} placeholder={"请输入用户名"} value={this.state.username} onChange={this.handleChange}/>
    <MyInput name="password" labelId={"pw"} labelTip={"密码"} type={"password"} placeholder={"请输入密码"} value={this.state.password} onChange={this.handleChange}/>
    <div className="form-group">
    <div className="col-sm-offset-2 col-sm-10">
    <div className="checkbox">
    <label>
    <input name="checked" type="checkbox" checked={this.state.checked} onChange={this.handleChange} /> 记住我
    </label>
    </div>
    </div>
    </div>  
    <MyButton type={"submit"} ButtonTip={"登陆"}/>
    </div>
    </form>
    );

备考:因为demo中须求取得真实的dom节点,所以定义了ref。

再加上css样式,页面就成功啦!最终,重点来啊!!!

四 、父子组件间通讯完毕拖拽

证实:由于自身要落到实处的效用是,鼠标按住子组件DragArea的时候,拖动的是整整form,所以运营拖拽的是DragArea,而响应的是form。所以,一开首必须把父组件的有的状态属性传给子组件,然后鼠标在DragArea按下的的时候,必须经过子组件DragArea找到父组件的固有坐标参数,然后更新父组件里面的景观属性,并且告诉父组件能够拓展拖拽了。父组件给子组件传参正是直接传送的。而子组件给父组件传参要求经过事件。所以在父组件中定义这么2个函数:

JavaScript

onChildChanged:function(newState){
//因为参数过多,所以把参数放到对象里面,通过对象来传
this.setState(newState); },

1
2
3
onChildChanged:function(newState){ //因为参数过多,所以把参数放到对象里面,通过对象来传
    this.setState(newState);
},

而子组件必要绑定这几个函数,如下边包车型地铁代码:callbackParent={this.onChildChanged}

在子组件中,响应的函数为:

JavaScript

startDrag:function(e){ var dragBox=document.getElementById(‘form’); var
newState={}; var event=e||window.event; event.preventDefault(); var
computedStyle=document.defaultView.getComputedStyle(dragBox,null);
newState.left=computedStyle.left; newState.top=computedStyle.top;
newState.currentX=event.clientX; newState.currentY=event.clientY;
newState.flag=true; <span style=”color: #0000ff;”>
this.props.callbackParent(newState);</span> }

1
2
3
4
5
6
7
8
9
10
11
12
13
startDrag:function(e){
    var dragBox=document.getElementById(‘form’);
        var newState={};
        var event=e||window.event;
        event.preventDefault();
        var computedStyle=document.defaultView.getComputedStyle(dragBox,null);
        newState.left=computedStyle.left;
        newState.top=computedStyle.top;
        newState.currentX=event.clientX;
        newState.currentY=event.clientY;
        newState.flag=true;
    <span style="color: #0000ff;">    this.props.callbackParent(newState);</span>
}

如此,在子组件中就开动了拖拽开关,并且一度更新了from的连锁参数,from的两外三个事件,move和endDrag分别为:

JavaScript

move:function(event){ var e = event ? event : window.event;
//兼容IE的写法 if (this.state.flag) { var nowX = e.clientX, nowY =
e.clientY; var disX = nowX – this.state.currentX, disY = nowY –
this.state.currentY; ReactDOM.findDOMNode(this.refs.dragBox).style.left
= parseInt(this.state.left) + disX + “px”;
ReactDOM.findDOMNode(this.refs.dragBox).style.top =
parseInt(this.state.top) + disY + “px”; } }, endDrag:function(){ var
computedStyle=document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.dragBox),null);
this.setState({ left:computedStyle.left, top:computedStyle.top,
flag:false }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
move:function(event){
    var e = event ? event : window.event;  //兼容IE的写法
    if (this.state.flag) {
        var nowX = e.clientX, nowY = e.clientY;
        var disX = nowX – this.state.currentX, disY = nowY – this.state.currentY;
        ReactDOM.findDOMNode(this.refs.dragBox).style.left = parseInt(this.state.left) + disX + "px";
        ReactDOM.findDOMNode(this.refs.dragBox).style.top = parseInt(this.state.top) + disY + "px";
    }
},
endDrag:function(){
    var computedStyle=document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.dragBox),null);
    this.setState({
        left:computedStyle.left,
        top:computedStyle.top,
        flag:false
    });
}

至此,拖拽实现!

伍 、反思回想

1.理论上来说,拖拽效果能够在任意元素中完成,拖拽的思路都是相同的,所以理论上来说,拖拽各种进程的函数能够抽离出来,做成3个Mixin,然后可以频仍调用。笔者一初叶的思绪正是那样,可是在传参、响应、绑定元素上边总是出错。查找了须臾间素材,没找到react与拖拽的简便写法资料,唯有部分react的专用插件,而且是用ES6的写法,由于现行反革命的水准还没能看懂。所以一时半刻吐弃了那种写法。希望有有关想法的大神们和自家沟通一下。

2.文中子组件获取from的参数时,用了var
dragBox=document.getElementById(‘form’);去找dom,那样好像违反了react的片段眼光。可是作者还不是很熟知该怎么从子组件获取父组件的dom。笔者试过在父组件定义refs=this.refs.dragBox。然后传给子组件,可是不精晓怎么浏览器一向报错说那一个不是dom节点。求大神指教。

3.拖拽事件的一般写法,是在document上面定义mousemove和mouseup事件,不过这五个事件都关系到from的参数,那样的话,若是本身在react中定义在document,就跟踪不了相关参数。所以自身就定义在了from上边。是否有更好的不二法门吧?求分享!

4.革命尚未成功,同志仍需努力!

 

本demo已上传至:

备考:由于本demo比较不难,精晓代码应该没有怎么难点,所以并未写代码表明,请见谅!

打赏援助本人写出更加多好作品,感激!

打赏笔者

React.js深刻学习详细剖析

2016/07/16 · JavaScript
· ReactJS

本文小编: 伯乐在线 –
winty
。未经作者许可,禁止转发!
欢迎参预伯乐在线 专栏撰稿人。

昨天,继续深刻学习react.js。

目录:

一、JSX介绍

二 、React组件生命周期详解

③ 、属性、状态的意思和用法

④ 、React中事件的用法

⑤ 、组件的一块应用

⑥ 、React中的双向绑定

 一、JSX介绍

①定义

JSX=JavaScript
XML,是一种在React组件内部营造标签的类XML语法。React在不使用JSX的状态下同样能够干活,不过利用JSX能够拉长组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化。由此推荐在React中利用JSX。

②特点

壹 、成分名首字母大写

贰 、符合嵌套规则

③ 、能够写入求值表明式

肆 、驼峰式命名

伍 、无法使用javascript原生函数的一对关键词,如for和class。须求替换到htmlFor和className

③应用办法

① 、使用动态值:JSX将八个花括号之间的内容{…}渲染为动态值,花括号指明了四个javascript上下文环境,花括号内部可以是多少个变量,也足以是函数。 例如:

JavaScript

var name=“winty”; <p>{name}</p>

1
2
3
var name=“winty”;
 
<p>{name}</p>

JavaScript

function date(d){ return [ d.getFullYear(), d.getMonth()+1, d.getDate()
].join(‘-); }; <p>{date(new Date()}</p>

1
2
3
4
5
6
7
8
function date(d){
  return [
    d.getFullYear(),
    d.getMonth()+1,
    d.getDate()
  ].join(‘-);
};
<p>{date(new Date()}</p>

2.注释:先是,在子节点中注释要用大括号包裹起来,然后就可以单行注释/**/,也足以多行注释//。

JavaScript

var Hello=React.createClass({ render:function(){ return <p
name=”winty”> //set name Hello ,World /* 多行注释 多行注释 */
</p> } });

1
2
3
4
5
6
7
8
9
10
11
var Hello=React.createClass({
     render:function(){
         return <p name="winty"> //set name
                  Hello ,World
                  /*
                    多行注释
                    多行注释
                  */
                  </p>
           }
   });

3.使用CSS内联样式

JavaScript

var style={ color:#000; }; React.render(<div
style={style}>….</div>,document.body);

1
2
3
4
var style={
    color:#000;
};
React.render(<div style={style}>….</div>,document.body);

4.利用规范判断

JavaScript

//方法1,三目运算符 var Hello=React.createClass({ render:function(){
return <p>Hello,{this.props.name?this.props.name :
“LuckyWinty”}</p> } }); //方法2,if-else语句 var
Hello1=React.createClass({ getName:function(){ if(this.props.name)
return this.props.name; else return “LuckyWinty”; render:function(){
return <p>Hello,{this.getName}</p> } });
//方法3,使用逻辑||运算符 var Hello3=React.createClass({
render:function(){ return
<p>Hello,{this.props.name||”LuckyWinty”}</p> } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//方法1,三目运算符
var Hello=React.createClass({
     render:function(){
        return <p>Hello,{this.props.name?this.props.name : "LuckyWinty"}</p>
     }
});
 
//方法2,if-else语句
var Hello1=React.createClass({
     getName:function(){
          if(this.props.name)
            return this.props.name;
          else
            return "LuckyWinty";
     render:function(){
        return <p>Hello,{this.getName}</p>
     }
});
//方法3,使用逻辑||运算符
var Hello3=React.createClass({
     render:function(){
        return <p>Hello,{this.props.name||"LuckyWinty"}</p>
     }
});

④非DOM属性介绍

JSX中有3个非DOM属性,分别是:dangerouslySetInnerHTML、ref、key。

dangerouslySetInnerHTML:在JSX中央直机关接插入HTML代码,可是若是能制止使用这脾个性则尽量制止使用。

老式的应用 innerHTML 或者会造成 cross-site scripting
(XSS) 攻击。
净化用户的输入来显示的时候,平常会师世错误,不合适的干干净净也是导致网页攻击 的来头之一。

在彻底的驾驭安全难点后果并不错地净化数据今后,生成只包罗唯一
key __html 的靶子,并且对象的值是清新后的数额。例如:

JavaScript

function createMarkup() { return {__html: ‘First · Second’}; };
<div dangerouslySetInnerHTML={createMarkup()} />

1
2
3
4
function createMarkup() {
  return {__html: ‘First &middot; Second’};
};
<div dangerouslySetInnerHTML={createMarkup()} />

ref:父组件引用子组件,你能够透过在性质中装置期望的引用名来定义贰个引用。例如:

JavaScript

… render:function(){ return <div> <input ref=”MyInput”
…/> </div> } …
//然后您就足以在组件中的任何地方使用this.refs.myInput获取那些引用了

1
2
3
4
5
6
7
8
render:function(){
  return <div>
           <input ref="MyInput" …/>
           </div>
}
//然后你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了

key:是一个可选的绝无仅有标识符,通过给组件设置二个无比的键,并保管它在三个渲染周期中保持一致,使得React可以更只可以地操纵应该起用二个零部件照旧销毁天公地道建八个零件,进而增加渲染品质。例如:

JavaScript

var Hello3=React.createClass({ render:function(){ return <ul>
<li key=”1″>1</li> <li key=”2″>2</li> <li
key=”3″>3</li> </ul> } });

1
2
3
4
5
6
7
8
9
var Hello3=React.createClass({
     render:function(){
        return <ul>
                <li key="1">1</li>
                <li key="2">2</li>
                <li key="3">3</li>
         </ul>
     }
});

越多详细音讯请参考:

 

② 、React组件生命周期详解

组件本质上正是状态机,输入分明,输出一定鲜明。状态和结果一一对应,从而使程序变得直观。状态产生转换时会触发分化的钩子函数,从而让开发者有机会做出响应。能够用事件的思路来精通状态,可是事件与事件之间相互独立,不过区别情状之间大概会互相影响。

组件的全部情形结合起来就成了组件的生命周期。即:初步化阶段->运维中阶段->销毁阶段。

不相同生命周期内能够自定义的函数

js达成原生js拖拽效果及思维,js深刻学习详细剖析。开端化阶段:

①getDefaultProps:获取暗中同意属性,只调用一回,是在createClass之后调用的。实例之间共享引用

②getInitialState:先导化各类实例的特有开首化状态

③component威尔Mount:mout便是装载的情致,这一个情势的情趣正是说组件即将棉被服装载到页面中,也是render此前最后一次修改意况的火候

④render:组件在render函数生成虚拟节点,最终由react将虚拟节点变成真的的节点渲染到页面上。只好访问this.props和this.state,唯有3个顶层组件,最好不用改动意况和DOM输出。

⑤componentDidMount:组件棉被服装载后才会被调用,也正是说调用这几个办法的时候,组件已经被渲染到了页面上,这么些时候能够修改DOM

那八个函数的实践各种正是从上到下的。必要留意的是getDefaultProps只会在组件的率先个实例被初始化的时候被调用,也正是说第三个实例之后都以从getInitialState开首调用。同四个零件的拥有实例的私下认可属性都以同样的。

重点测试代码:

JavaScript

<script type=”text/babel”> var Hello=React.createClass({
getDefaultProps:function(){ console.log(“getDefaultProps, 1”); },
getInitialState:function(){ console.log(“getInitialState, 2”); return
null; }, componentWillMount:function(){ console.log(“componentWillMount,
3”); }, render:function(){ console.log(“render, 4”); return
<p>Hi,LuckyWinty!</p> }, componentDidMount:function(){
console.log(“componentDidMount, 5”); }, });
React.render(<Hello></Hello>,document.body); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/babel">
    var Hello=React.createClass({
      getDefaultProps:function(){
          console.log("getDefaultProps, 1");
      },
      getInitialState:function(){
          console.log("getInitialState, 2");
          return null;
      },
      componentWillMount:function(){
          console.log("componentWillMount, 3");
      },
      render:function(){
          console.log("render, 4");
          return <p>Hi,LuckyWinty!</p>
      },
      componentDidMount:function(){
          console.log("componentDidMount, 5");
      },
    });
    React.render(<Hello></Hello>,document.body);
</script>

运行结果:

美高梅开户网址 3

运维中阶段:

①component威尔ReceiveProps:那一个函数在组件即将接受到属性时接触的,或然是父组件的属性产生变化时,属性在传递到零部件以前,开发者有机遇通过那几个函数去处理属性。比如修改,更新内部景观等。

②shouldComponentUpdate:当组件接收到新属性只怕新景色的时候接触的。这些是一个疑团函数,也正是说大家得以告诉react不去立异有个别组件。因为有时属性或许状态并不会招致组件爆发更新。在组件不必要更新的景况下,手动使shouldComponentUpdate再次回到false,那样react就不须要再通过render和diff算法去判断是还是不是要立异,从而提高品质。

③component威尔Update:render触发在此以前接触,更新组件,不能够改改属性和景色

④render:组件在render函数生成虚拟节点,最后由react将虚拟节点变成真的的节点渲染到页面上,只可以访问this.props和this.state,唯有二个顶层组件,最好不用改动景况和DOM输出。

⑤componentDidUpdate:render之后,真正的DOM被渲染之后调用

备考:那四个函数的推行各类也是从上到下的。这么些的测试代码已上传至:

销毁阶段:

①component威尔Unmount:那些函数在销毁操作真正执行从前调用,给开发者最后的空子开始展览局地清理工科作。

叁 、属性、状态的含义和用法

属性的意思:

props=properties,属性是无法由组件自个儿开始展览改动的,组件的习性是由父组件传递进入的。

属性的用法:

一、键值对

XHTML

<Hello name=”winty”/> 字符串 <Hello name={123}/>
大括号包裹的求值表达式 <Hello name={[1,2,3]}/> 传入数组
<Hello name={winty}/> 变量

1
2
3
4
<Hello name="winty"/>   字符串
<Hello name={123}/>    大括号包裹的求值表达式
<Hello name={[1,2,3]}/>   传入数组
<Hello name={winty}/>   变量

二 、展开定义(个人觉得正是对象式定义)

JavaScript

var props={ one:”123″, two:”22″ }

1
2
3
4
var props={
   one:"123",
   two:"22"
}

这么定义的话,理论上使用相应是one={props.one}那样调用,可是如此写起来相比繁琐,而且假诺数量被改动,就要求相应修改相应的赋值,并且不恐怕动态地设置属性,所以react中添加了一种展开语法:

<Hello {…props}/>    //也正是四个点加上对象名称。

如此那般使用实行语法,react就会活动把对象中的变量和值当作是性质的赋值,所以Hello实际上就得到了one、two两脾性子,假使没有多少个点的话,Hello拿到的实在正是props对象,使用的时候还亟需自个儿从中取出变量和值

③ 、调用react提供的setProps()函数(大约不用)

JavaScript

var
instance=React.render(<HelloWorld></HelloWorld>,document.body);
instance.setProps({name:”winty”});

1
2
var instance=React.render(<HelloWorld></HelloWorld>,document.body);
instance.setProps({name:"winty"});

地方包车型客车意义:

state,状态是由事物自行处理、不断变更的

事态的用法:

getInitialState:初阶化实例的气象

setState:更新组件状态,一旦更新了情状,那么就会触发diff算法,检查内容是或不是发生变化,若有转变则更新组件,不然就无须。

属性和气象相比

相似点:都以纯JS对象、都会触发render更新、都具有鲜明。

美高梅开户网址 4

天性和气象区分:组件在运转时须要修改的多少就是情形

四 、React中事件的用法

事件处理函数:React绑定事件处理器的点子和HTML语法非凡相近,全数的事件在命名上与原生的javascript规范一致,并且会在同一的田地下接触。

编纂函数

handleClick:function(){

}

绑定

onClick={this.handleClick}

各队事件详细表明:

①移动设备上的触摸事件:onTouchCancel、onTouchEnd、onTouchMove、onTouchStart

②键盘类事件:onKeyDown、onKeyPress、onKeyUp

③剪切类事件:onCopy、onCut、onPaste

④表单类:onChange//内容变更即触发、onInput//输入框、onSubmit//禁止表单私下认可跳转行为

⑤事件:onFocus、onBlur

⑥UI元素类:onScroll

⑦鼠标滚动事件:onWheel

⑧鼠标类型:onClick、onContextMenu//右键菜单、onDoubleClick
//双击、onMouseDown、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp

⑨拖拽事件:onDrop、onDrag、onDragEnd、onDragEnter、onDragExit、onDragLeave、onDragOver、onDragStart

事件指标介绍

行使情势:即使在编辑事件目的处理函数的时候,添加1个参数。获得那个指标之后,就透过对象的习性来能够获得一些消息。

例如:

JavaScript

handleChange:function(event){ console.log(event.target.value); }

1
2
3
handleChange:function(event){
    console.log(event.target.value);
}

演示中,event正是事件目的,event.target便是事件指标的习性,就是呼应的DOM成分,拿到那么些因素之后再赢得它的值。

事件指标属性

通用属性:

美高梅开户网址 5

其余差别类其他轩然大波有例外的质量,不难通晓一下

美高梅开户网址 6

知道了事件的局地品质,大家就能够很便宜地在React中取得那个属性,实行一些逻辑的处理,完毕部分繁杂的业务作用、页面效果等。

诸如:大家能够利用鼠标事件性质,实时展现鼠标在有个别区域的坐标:

JavaScript

<script type=”text/jsx”> var HelloWorld = React.createClass({
getInitialState: function () { return { x: 0, y: 0 } }, handleMouseMove:
function (event) { this.setState({ x: event.clientX, y: event.clientY
}); }, render: function () { return <div
onMouseMove={this.handleMouseMove} style={{ height: ‘500px’, width:
‘500px’, backgroundColor: ‘gray’ }}> {this.state.x + ‘, ‘ +
this.state.y} </div>; }, });
React.render(<HelloWorld></HelloWorld>, document.body);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/jsx">
        var HelloWorld = React.createClass({
            getInitialState: function () {
                return {
                    x: 0,
                    y: 0
                }
            },
            handleMouseMove: function (event) {
                this.setState({
                    x: event.clientX,
                    y: event.clientY
                });
            },
            render: function () {
                return <div onMouseMove={this.handleMouseMove} style={{
                    height: ‘500px’,
                    width: ‘500px’,
                    backgroundColor: ‘gray’
                }}>
                {this.state.x + ‘, ‘ + this.state.y}
                </div>;
            },
        });
        React.render(<HelloWorld></HelloWorld>, document.body);
    </script>

五 、组件的一块应用

组件协同应用的概念:组件的共同本质上就是对组件的一种集体、管理方法。

零件协同应用的目标:逻辑清晰、代码模块化、封装细节、代码可复用。

零件协同使用的章程:

①零件嵌套使用:也正是说,用三个父组件把子组件封装起来,本质就是父子关系。如下图描述:

美高梅开户网址 7

实例代码:

JavaScript

var React = require(‘react’); var
CommentList=require(‘./CommentList.jsx’); var
CommentForm=require(‘./commentFrom.jsx’); var CommentBox =
React.createClass({ render: function() { return ( <div
className=”commentBox”> <h1>Comments</h1> <CommentList
/> //那是3个组件 <CommentForm /> //那是另四个零部件 </div>
); } }); module.exports = CommentBox;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var React = require(‘react’);
var CommentList=require(‘./CommentList.jsx’);
var CommentForm=require(‘./commentFrom.jsx’);
 
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />   //这是一个组件
        <CommentForm />    //这是另一个组件
      </div>
    );
  }
});
 
module.exports = CommentBox;

父子组件之间的通讯:

父组件->子组件:通过质量,父组件把数据通过质量来传递给子组件

子组件->父组件:本质上,子组件不可能向父组件通讯。然则足以直接地通过接触事件来通信,也正是寄托。

嵌套组合缺点:

父子关系的现实贯彻内需通过深思,贸然编写将导致关系混乱、代码难以维护

不可能控制全部细节,使用者只略知一二组件用法,不精晓达成细节,境遇标题难以修复

②Mixin:也便是足以把相同的代码抽象出来,封装成二个函数,然后再调用。

Mixin的目的:横向抽离出组件的貌似代码

诚如概念:面向切向面编制程序、插件

实例代码:

JavaScript

var Time=React.createClass({ mixins:[IntervalMixin(1000)],
getInitialState:function(){ return {secondElapsed:0}; },
onTick:function(){
this.setState({secondElapsed:this.state.secondElapsed+1}); },
render:function(){ return ( <div>Seconds
Elapsed:{this.state.secondsElapsed}</div> ); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Time=React.createClass({
    mixins:[IntervalMixin(1000)],
    getInitialState:function(){
       return {secondElapsed:0};
    },
    onTick:function(){
    this.setState({secondElapsed:this.state.secondElapsed+1});
    },
    render:function(){
    return (
       <div>Seconds Elapsed:{this.state.secondsElapsed}</div>
    );
    }
});

mixin格外不难,它们正是勾兑进组件类中的对象而已。React在那方面达成得越来越尖锐,它能防患静默函数覆盖,同时还协助多少个mixin混合。可是那个效应在其他系统中可能滋生争辨。例如:

JavaScript

React.createClass({ mixins:[{ getInitialState:function(){ return {a:1}}
}], getInitialState:function(){ return {b:2}} });

1
2
3
4
5
6
React.createClass({
    mixins:[{
      getInitialState:function(){  return {a:1}}
    }],
    getInitialState:function(){  return {b:2}}
});

诸如此类在mixin和零部件类中同时定义了getInitialState方法,获得的开端state是{a:1,b:2}.倘诺mixin中的方法和零部件类中的方法再次回到的靶子中设有双重的键,React会抛出贰个谬误来警戒这几个题材。

 ⑥ 、React中的双向绑定

React创制的见识跟angular那3个框架正是例外的,React是单向数据绑定的。那么怎么落到实处像angular那样的双向绑定效果呢?看代码:

XHTML

<!DOCTYPE html> <html lang=”zh-cn”> <head> <meta
charset=”UTF-8″> <title>React中的双向数据绑定</title>
</head> <body> <script
src=”./react-0.13.2/react-0.13.2/build/react-with-addons.js”></script>
<script
src=”./react-0.13.2/react-0.13.2/build/JSXTransformer.js”></script>
<script type=”text/jsx”> var BindingMixin = { handleChange:
function(key) { var that = this var newState = {} return function(event)
{ newState[key] = event.target.value that.setState(newState) } } } var
BindingExample = React.createClass({ mixins:
[React.addons.LinkedStateMixin], getInitialState: function() { return
{ text: ”, comment: ”, } }, render: function() { return <div>
<input type=”text” placeholder=”请输入内容”
valueLink={this.linkState(‘text’)} /> <textarea
valueLink={this.linkState(‘comment’)}></textarea>
<h3>{this.state.text}</h3>
<h3>{this.state.comment}</h3> </div> } })
React.render(<BindingExample></BindingExample>,
document.body); </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>React中的双向数据绑定</title>
</head>
<body>
    <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
    <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
    <script type="text/jsx">
        var BindingMixin = {
            handleChange: function(key) {
                var that = this
                var newState = {}
                return function(event) {  
                    newState[key] = event.target.value
                    that.setState(newState)
                }
            }
        }
        var BindingExample = React.createClass({
            mixins: [React.addons.LinkedStateMixin],
            getInitialState: function() {
                return {
                    text: ”,
                    comment: ”,
                }
            },
            render: function() {
                return <div>
                    <input type="text" placeholder="请输入内容" valueLink={this.linkState(‘text’)} />
                    <textarea valueLink={this.linkState(‘comment’)}></textarea>
                    <h3>{this.state.text}</h3>
                    <h3>{this.state.comment}</h3>
                </div>
            }
        })
        React.render(<BindingExample></BindingExample>, document.body);
    </script>
</body>
</html>

效果图(没有CSS样式,有点不优雅,见谅):

美高梅开户网址 8

越来越多学习demo已上传至:

参考资料:

《React引领未来的用户界面开发框架》

极客大学录制课程

打赏帮助作者写出越来越多好文章,感谢!

打赏我

    表单组件两连串型:约束组件和无约束组件

应用 create-react-app 快捷营造 React 开发条件

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

项指标目录结构如下:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

打赏援救笔者写出越来越多好小说,感谢!

任选一种支付办法

美高梅开户网址 9
美高梅开户网址 10

1 赞 5 收藏
评论

打赏援救自身写出越多好小说,多谢!

任选一种支付方式

美高梅开户网址 11
美高梅开户网址 12

1 赞 3 收藏
评论

    1. 无束缚组件:

React JSX

您的 React JSX 代码可以置身1个独立文件上,例如大家创建三个helloworld_react.js 文件,代码如下:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然后在 HTML 文件中引入该 JS 文件:

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术,更是梦想!</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);
  1. 能够在 JSX 中应用 JavaScript 表明式。表明式写在花括号 {} 中

  2. 在 JSX 中不能够使用 if else 语句,但足以行使 conditional (安慕希运算)
    表达式来代表

  3. 诠释要求写在花括号中

  4. 要渲染 HTML 标签,只需在 JSX 里应用小写字母的价签名;要渲染 React
    组件,只需创造3个大写字母起头的地头变量

至于作者:winty

美高梅开户网址 13

前端工程师,前端爱好者。博客:

个人主页 ·
笔者的篇章 ·
1 ·
 

美高梅开户网址 14

关于我:winty

美高梅开户网址 15

前端工程师,前端爱好者。博客:

个人主页 ·
作者的稿子 ·
1 ·
 

美高梅开户网址 16

        eg:

React 组件

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World!</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

React.createClass 方法用于转移1个零部件类 HelloMessage。<HelloMessage
/> 实例组件类并出口新闻。

小心,原生 HTML 成分名以小写字母伊始,而自定义的 React
类名以大写字母伊始,比如 HelloMessage 不可能写成
helloMessage。除此之外还必要小心组件类只好分包三个顶层标签,不然也会报错。

假定大家要求向组件传递参数,能够运用 this.props 对象,实例如下:

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')
);

以上实例中 name 属性通过 this.props.name 来获得。

小心,在添加属性时, class 属性要求写成 className ,for 属性须要写成
htmlFor ,那是因为 class 和 for 是 JavaScript 的保留字。

var MyForm =
React.createClass({

复合组件

我们得以经过创办多少个零件来合成1个零部件,即把组件的例外成效点展开分离。

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

ReactDOM.render(
  <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
  document.getElementById('example')
);

实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的消息,也便是说
WebSite 拥有 Name 和 Link 的实例。

    render:
function() {

React State(状态)

(React 把组件看成是1个状态机(State
Machines),通过与用户的交互,完成区别意况,然后渲染
UI,让用户界面和数目保持一致,只需立异组件的 state,然后遵照新的 state
重新渲染用户界面(不要操作 DOM))

getInitialState 方法用于定义开首状态,也正是八个目的,这几个目的能够通过
this.state 属性读取。当用户点击组件,导致情状变化,this.setState
方法就修改境况值,每一遍修改今后,自动调用 this.render 方法,再度渲染组件.

 var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? '喜欢' : '不喜欢';
    return (
      <p onClick={this.handleClick}>
        你<b>{text}</b>我。点我切换状态。
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

  
   
 return
<input
type=”text”
defaultValue=”Hello
World!”/>;

React Props

state 和 props 主要的区分在于 props 是不可变的,而 state
可以依据与用户交互来改变。那就是为何某些容器组件需求定义 state
来更新和改动数据。 而子组件只能通过 props 来传递数据。

    }

使用 Props

以下实例演示了什么样在组件中采纳 props:

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')

实例中 name 属性通过 this.props.name 来得到。

});

默认 Props

您能够经过 getDefaultProps() 方法为 props 设置私下认可值,实例如下:

var HelloMessage = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'Runoob'
    };
  },
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

      
 组件的value并非由父组件设置,而是让<input/>自个儿决定自身的值。

State 和 Props

笔者们能够在父组件中装置 state, 并通过在子组件上应用 props
将其传递到子组件上。在 render 函数中, 大家设置 name 和 site
来赢得父组件传递过来的数额。

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "菜鸟教程",
      site: "http://www.runoob.com"
    };
  },

  render: function() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

       
八个无约束的零部件没有太大用处,除非能够访问它的值。能够通过给<input/>添加二个ref属性以访问到DOM节点的值。ref是一个不属于DOM属性的非正规性质。能够透过this上下文访问那个节点,全部的ref都丰硕到了this.refs上。

Props 验证

Props 验证使用
propTypes,它能够确定保障大家的利用组件被正确使用,React.PropTypes
提供层见迭出证实器 (validator) 来说明传入数据是或不是管用。当向 props
传入无效数据时,JavaScript 控制台会抛出警示。
以下实例创立八个 Mytitle 组件,属性 title
是必须的且是字符串,非字符串类型会活动转换为字符串 :

var title = "菜鸟教程";
// var title = 123;
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

越多验证器表明如下:

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,

    //  React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

        eg:调用value:

React 组件 API

设置情形:setState
轮换状态:replaceState
设置属性:setProps
轮换属性:replaceProps
强制更新:forceUpdate
获取DOM节点:findDOMNode
判断组件挂载状态:isMounted

var MyForm =
React.createClass({

设置意况:setState

setState(object nextState[, function callback])
  • 参数表明
    • nextState,将要设置的新情景,该情形会和当下的state合并
    • callback,可选参数,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。
      统一nextState和如今state,不分厚薄新渲染组件。setState是React事件处理函数大壮伸手回调函数中触发UI更新的首要性方法。

关于setState
1.
无法在组件内部通过this.state修改意况,因为该状态会在调用setState()后被沟通。
2.
setState()并不会马上改变this.state,而是创立一个快要处理的state。setState()并不一定是一道的,为了升高质量React会批量执行state和DOM渲染。
3.
setState()总是会触发三遍组件重绘,除非在shouldComponentUpdate()中落到实处了有的标准化渲染逻辑。

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我!点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

实例中经过点击 h2 标签来驱动点击计数器加 1。

    submitHandler: function(event) {

轮换状态:replaceState

replaceState(object nextState[, function callback])
  • nextState,将要设置的新情状,这一场所会交替当前的state。
  • callback,可选参数,回调函数。该函数会在replaceState设置成功,且组件重新渲染后调用。

replaceState()方法与setState()类似,可是方法只会保留nextState中状态,原state不在nextState中的状态都会被去除。

        event.preventDefault();

安装属性:setProps

setProps(object nextProps[, function callback])
  • nextProps,将要设置的新属性,该境况会和如今的props合并
  • callback,可选参数,回调函数。该函数会在setProps设置成功,且组件重新渲染后调用。

设置组件属性,并再度渲染组件。props也正是组件的数据流,它连接会从父组件向下传递至全数的子组件中。当和八个外部的JavaScript应用集成时,大家兴许会供给向组件传递数据或通告React.render()组件必要重新渲染,能够利用setProps()。更新组件,笔者得以在节点上海重机厂新调用React.render(),也能够通过setProps()方法改变组件属性,触发组件重新渲染。

  
   
 //通过ref访问输入框

轮换属性:replaceProps

replaceProps(object nextProps[, function callback])
  • nextProps,将要设置的新属性,该属性会替换当前的props。
  • callback,可选参数,回调函数。该函数会在replaceProps设置成功,且组件重新渲染后调用。

replaceProps()方法与setProps类似,但它会删除原有props

  
   
 var
helloTo
= this.refs.helloTo.getDOMNode().value;

强制更新:forceUpdate

forceUpdate([function callback])

参数表达

  • callback,可选参数,回调函数。该函数会在组件render()方法调用后调用。
  1. forceUpdate()方法会使组件调用自己的render()方法重新渲染组件,组件的子组件也会调用本人的render()。然而,组件重新渲染时,依旧会读取this.props和this.state,假诺状态没有更改,那么React只会更新DOM。
  2. forceUpdate()方法适用于this.props和this.state之外的组件重绘(如:修改了this.state后),通过该形式通告React需求调用render()
  3. 一般的话,应该尽量防止使用forceUpdate(),而仅从this.props和this.state中读取状态并由React触发render()调用。

        alert(helloTo);

获取DOM节点:findDOMNode

DOMElement findDOMNode()

返回值:DOM元素DOMElement

比方组件已经挂载到DOM中,该措施重返对应的当地浏览器 DOM
成分。当render再次回到null 或
false时,this.findDOMNode()也会回到null。从DOM
中读取值的时候,该方法很有用,如:获取表单字段的值和做一些 DOM 操作。

    }

判定组件挂载状态:isMounted

bool isMounted()
再次来到值:true或false,表示组件是还是不是已挂载到DOM中
isMounted()方法用于判断组件是还是不是已挂载到DOM中。可以运用该方法保险了setState()和forceUpdate()在异步场景下的调用不会出错。

React 组件生命周期
零件的生命周期可分为两个情景:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
生命周期的措施有:
component威尔Mount 在渲染前调用,在客户端也在服务端。
componentDidMount :
在率先次渲染后调用,只在客户端。之后组件已经转移了相应的DOM结构,能够由此this.getDOMNode()来拓展走访。
倘诺你想和别的JavaScript框架一起行使,能够在那么些措施中调用setTimeout,
setInterval或许发送AJAX请求等操作(防止异部操作阻塞UI)。
component威尔ReceiveProps
在组件接收到一个新的prop时被调用。这一个主目的在于初阶化render时不会被调用。
shouldComponentUpdate
重回三个布尔值。在组件接收到新的props或许state时被调用。在起先化时要么选拔forceUpdate时不被调用。
可以在你确认不要求创新组件时采用。
component威尔Update在组件接收到新的props或然state但还未曾render时被调用。在开头化时不会被调用。
componentDidUpdate 在组件完毕换代后随即调用。在开头化时不会被调用。
component威尔Unmount在组件从 DOM 中移除的时候登时被调用。
以下实例在 Hello 组件加载将来,通过 componentDidMount
方法设置2个定时器,每隔100阿秒重新设置组件的光滑度,不分相互新渲染:
React 实例
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},

render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

ReactDOM.render(
<Hello name=”world”/>,
document.body
);

以下实例早先化 state , setNewnumber 用于更新 state。全部生命周期在
Content 组件中。
React 实例
var Button = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
this.setState({data: this.state.data + 1})
},
render: function () {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
})
var Content = React.createClass({
componentWillMount:function() {
console.log(‘Component WILL MOUNT!’)
},
componentDidMount:function() {
console.log(‘Component DID MOUNT!’)
},
componentWillReceiveProps:function(newProps) {
console.log(‘Component WILL RECEIVE PROPS!’)
},
shouldComponentUpdate:function(newProps, newState) {
return true;
},
componentWillUpdate:function(nextProps, nextState) {
console.log(‘Component WILL UPDATE!’);
},
componentDidUpdate:function(prevProps, prevState) {
console.log(‘Component DID UPDATE!’)
},
componentWillUnmount:function() {
console.log(‘Component WILL UNMOUNT!’)
},

render: function () {
  return (
    <div>
      <h3>{this.props.myNumber}</h3>
    </div>
  );
}

});
ReactDOM.render(
<div>
<Button />
</div>,
document.getElementById(‘example’)
);

React AJAX
React 组件的数据足以由此 componentDidMount 方法中的 Ajax
来取得,当从服务端获取数据库能够将数据存款和储蓄在 state 中,再用
this.setState 方法重新渲染 UI。
当使用异步加载数据时,在组件卸载前应用 componentWillUnmount
来废除未形成的呼吁。
以下实例演示了获得 Github 用户最新 gist 共享描述:
React 实例
var UserGist = React.createClass({
getInitialState: function() {
return {
username: ”,
lastGistUrl: ”
};
},

componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},

componentWillUnmount: function() {
this.serverRequest.abort();
},

render: function() {
return (
<div>
{this.state.username} 用户最新的 Gist 共享地址:
<a
href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
});

ReactDOM.render(
<UserGist source=””
/>,
document.getElementById(‘example’)
);

React 表单与事件
在实例中大家设置了输入框 input 值value =
{this.state.data}。在输入框值发生变化时大家得以立异 state。大家能够动用
onChange 事件来监听 input 的变型,并修改 state。
React 实例
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: ‘Hello Runoob!’};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<input type=”text” value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById(‘example’)
);

下边包车型客车代码将渲染出三个值为 Hello Runoob! 的 input 成分,并经过 onChange
事件响应更新用户输入的值。
实例 2
在偏下实例中大家将为我们演示怎样在子组件上采用表单。 onChange 方法将触发
state 的换代并将履新的值传递到子组件的输入框的 value
上来重新渲染界面。
你必要在父组件通过创建事件句柄 (handleChange) ,并视作 prop
(updateStateProp) 传递到你的子组件上。
React 实例
var Content = React.createClass({
render: function() {
return <div>
<input type=”text” value={this.props.myDataProp}
onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>;
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: ‘Hello Runoob!’};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById(‘example’)
);

React 事件
以下实例演示通过 onClick 事件来修改数据:
React 实例
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: ‘Hello Runoob!’};
},
handleChange: function(event) {
this.setState({value: ‘菜鸟教程’})
},
render: function() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>点我</button>
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById(‘example’)
);

当你供给从子组件中更新父组件的 state 时,你必要在父组件通过创制事件句柄
(handleChange) ,并作为 prop (updateStateProp)
传递到您的子组件上。实例如下:
React 实例
var Content = React.createClass({
render: function() {
return <div>
<button onClick =
{this.props.updateStateProp}>点我</button>
<h4>{this.props.myDataProp}</h4>
美高梅开户网址,</div>
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: ‘Hello Runoob!’};
},
handleChange: function(event) {
this.setState({value: ‘菜鸟教程’})
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById(‘example’)
);

React Refs
能够用来绑定到 render() 输出的其他组件上,允许你引用 render()
重返的对应的辅助实例,确定保证在任哪天刻总是得到科学的实例
采取格局
绑定3个 ref 属性到 render 的再次来到值上:
<input ref=”myInput” />
在其他代码中,通过 this.refs 获取支撑实例:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
一体化实例
你能够经过行使 this 来取伏贴前 React 组件,或使用 ref
来获取组件的引用,实例如下:
React 实例
var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 获取关节
this.refs.myInput.focus();
},
render: function() {
// 当组件插入到 DOM 后,ref 属性添加3个零件的引用于到 this.refs
return (
<div>
<input type=”text” ref=”myInput” />
<input
type=”button”
value=”点本身输入框获取关节”
onClick={this.handleClick}
/>
</div>
);
}
});

ReactDOM.render(
<MyComponent />,
document.getElementById(‘example’)
);

    render: function() {

  
   
 return
(

  
   
   
 <form
onSubmit={this.submitHandler}>

  
   
   
   
 <input
ref=”helloTo”
type=”text”
defaultValue=”Hello
World!”/>

  
   
   
  
  <br
/>

  
   
   
   
 <button
type=”submit”>Speak</button>

  
   
   
 </form>

        );

    }

});

    2. 约束组件:

       
约束组件的方式与React别的种类组件的形式一致。表单的情景交由React组件控制。状态值被储存在React组件的state中。

       
约束组件能更好的主宰表单组件。在约束组件中,输入框的值是由父组件社设置的。

        eg:

var MyForm =
React.createClass({ 
  

    getInitialState: function() {

  
   
 return
{

  
   
   
 helloTo: “Hello
World!”

        };

    }

    handleChange: function(event) {

  
   
 this.setState({

  
   
   
 helloTo: event.target.value

        });

    }

    submitHandler: function(event) {

        event.preventDefault();

  
   
 //通过ref访问输入框

        alert(this.state.helloTo);

    }

    render:
function() {

  
   
 return
(

  
   
   
 <form
onSubmit={this.submitHandler}>

  
   
   
   
 <input
type=”text”
value={this.state.helloTo} onChange={this.handleChange}/>

  
   
   
   
 <br
/>

  
   
   
   
 <button
type=”submit”>Speak</button>

  
   
   
 </form>

        );

    }

});

       
约束组件能够操纵数据流,在用户输入数据时更新state。如将用户输入的字符转成变大写(如:this.setState({helloTo:
event.target.value.toUpperCase()});)并添加到输入框时不会产生闪烁。那是因为React拦截了浏览器原生的change事件,在setState被调用后,那么些组件就会再也渲染输入框。然后React计算差距,更新输入框的值。

    3. 表单事件:

       
React匡助具备HTML事件。这个事件服从驼峰命名的约定,且会被转成合成事件。这一个事件是规则的,提供了跨浏览器的同一接口。

        全部合成事件都提供了event.target来拜访触发事件的DOM节点。

        访问约束组件最简便的法门之一:

handleEvent:
function(syntheticEvent) {

  
 var
DOMNode
= syntheticEvent.target;

  
 var
newValue
= DOMNode.value;

}

    4. Label:

       
Label是表单成分中至关心重视要组件,能够肯定地向用户传达你的要求,提高单选框和复选框的可用性。

        React中class变成className,for变为htmlFor:

<label
className=”col-sm-3
control-label no-padding-right”>开户行<span
className=”red”>*</span></label>

    5. 文本框和Select:

        React中的<textarea/>和<select/>:(约束的)

        

<textarea
value={this.state.value}
onChange={this.handleChange}
/>

<select
value={this.state.value} onChange={this.handleChange}>

  
 <option
value=”grapefruit”>Grapefruit</option>

  
 <option
value=”lime”>Lime</option>

  
 <option
value=”coconut”>Coconut</option>

  
 <option
value=”mango”>Mango</option>

</select>

        多选时可在select后增加multi={true}属性

       
当使用多选的select时,select组件的值不会更新,唯有选用的selected属性会发生变化。能够应用ref或event.target来拜访选项,检查它们是否被入选。

        eg:

handleChange:
function(event) {

  
 var
checked
= [];

  
 var
sel = event.target;

  
 for(var
i = 0; i < sel.length; i++) {

  
   
 var
value
= sel.value[i];

  
   
 if
(value.selected) {

            checked.push(value.value);

        }

    }

 }

    6. 复选框和单选框:

       
类型为checkbox或radio的<input/>与品种为text的<input/>的一言一动完全不等同。日常复选框和单选框的值是不变的,唯有checked状态会变动。所以要控制复选框或单选框就要控制它们的checked属性。也足以在非约束的复选框可能单选框中选拔defaultChecked。

<input
type=”checkbox”
className=”ace”

  
 checked={this.state.outboundLogisticsStatus
== “SENTED”}

  
 onChange={this.handleLogisticsStatusChange}/>

  
 <span
className=”lbl”>推送出库单

</span>

    7. 表单成分的name属性:

       
在React中,name属性对于表单成分来说并从未那么首要,因为约束表单组件已经把值存款和储蓄到了state中,并且表单的付出事件也会被截留。在赢得表单值的时候,name属性并不是必须的。对于非约束的表单组件来说,也足以应用refs来一贯访问表单成分。

        那么属性的功力:

            — name属性能够让第③方表单种类化类库在React中健康办事;

            — 对于仍旧选取守旧提交格局的表单来说,name属性是必须的;

            —
在用户浏览器中,name被用在活动填写常用音讯中,比如用户地址;

            —
对于非约束的单选框组件,name是有须求的,它可以视作这几个组件分组的基于,确认保障在同近期刻,同一个表单中负有同样name的单选框唯有二个足以被选中。假使不选用name属性,这一行为能够行使约束的单选框完成。

    8. 多少个表单成分与change处理器:

        重用事件处理器:

            — 通过.bind传递其余参数

var
MyForm
= React.createClass({

    getInitialState: function
() {

  
   
 return
{

  
   
   
 given_name: “”,

  
   
   
 family_name: “”

        };

    },

    handleChange: function
(name, event) {

    
   var
newState
= {};

        newState[name] = event.target.value;

  
   
 this.setState(newState);

    },

    submitHandler: function
(event) {

        event.preventDefault();

  
   
 var
words
= [

  
   
   
 “Hi”,

  
   
   
 this.state.given_name,

  
   
   
 this.state.family_name

        ];

        alert(words.join(”
“));

    },

    render: function
() {

  
   
 return
<form
onSubmit={this.submitHandler}>

  
   
   
 <label
htmlFor=”given_name”>Given Name:</label>

  
   
   
 <br
/>

  
   
   
 <input

  
   
   
   
 type=”text”

  
   
   
   
 name=”given_name”

  
   
   
   
 value={this.state.given_name}

  
   
   
   
 onChange={this.handleChange.bind(this,’given_name’)}/>

  
   
   
 <br
/>

  
   
   
 <label
htmlFor=”family_name”>Family Name:</label>

  
   
   
 <br
/>

  
   
   
 <input

  
   
   
   
 type=”text”

  
   
   
   
 name=”family_name”

  
   
   
   
 value={this.state.family_name}

  
   
   
   
 onChange={this.handleChange.bind(this,’family_name’)}/>

  
   
   
 <br
/>

  
   
   
 <button
type=”submit”>Speak</button>

  
   
 </form>;

    }

});

            — 使用DOMNode的name属性来判断供给更新哪个组件的意况

var
MyForm
= React.createClass({

    getInitialState: function
() {

  
   
 return
{

  
   
   
 given_name: “”,

  
   
   
 family_name: “”

        };

    },

    handleChange: function
(event) {

  
   
 var
newState
= {};

        newState[event.target.name] =
event.target.value;

  
   
 this.setState(newState);

    },

    submitHandler: function
(event) {

        event.preventDefault();

  
   
 var
words
= [

  
   
   
 “Hi”,

  
   
   
 this.state.given_name,

  
   
   
 this.state.family_name

        ];

        alert(words.join(”
“));

    },

    render: function
() {

  
   
 return
<form
onSubmit={this.submitHandler}>

  
   
 <label
htmlFor=”given_name”>Given Name:</label>

  
   
 <br
/>

  
   
 <input

  
   
   
 type=”text”

  
   
   
 name=”given_name”

  
   
   
 value={this.state.given_name}

  
   
   
 onChange={this.handleChange}/>

  
   
 <br
/>

  
   
 <label
htmlFor=”family_name”>Family Name:</label>

  
   
 <br
/>

  
   
 <input

  
   
   
 type=”text”

  
   
   
 name=”family_name”

  
   
   
 value={this.state.family_name}

  
   
   
 onChange={this.handleChange}/>

  
   
 <br
/>

  
   
 <button
type=”submit”>Speak</button>

  
   
 </form>;

    }

});

            —
React.addons.LinkedStateMixmin为组件提供1个linkState方法。linkState重临三个对象,包罗value和requestChange三个属性。

                value依据提供的name属性从state中获得相应的值

                requestChange是三个函数,使用新的值更新同名的state

                    eg:

this.linkState(‘given_name’);

//返回

{

    value: this.state.given_name

  
 requestChange: function
(newValue) {

       this.setState({

          given_name: newValue

       });

    },

}

             
 必要把那一个目的传递给一个React特有的非DOM属性valueLink。valueLink使用对象提供的value更新表单域的值,并提供一个onChange处理器,当表单域更新时选择新的值调用requestChange。

var
MyForm
= React.createClass({

  
 mixins: [React.addons.LinkedStateMixin],

    getInitialState: function
() {

  
   
 return
{

  
  
    
 given_name: “”,

  
  
    
 family_name: “”

        };

    },

    submitHandler: function
(event) {

        event.preventDefault();

  
   
 var
words
= [

  
   
   
 “Hi”,

  
   
   
 this.state.given_name,

  
   
   
 this.state.family_name

        ];

        alert(words.join(”
“));

    },

    render: function
() {

  
   
 return
<form
onSubmit={this.submitHandler}>

  
   
   
 <label
htmlFor=”given_name”>Given Name:</label>

  
   
   
 <br
/>

  
   
   
 <input

  
   
   
   
 type=”text”

  
   
   
   
 name=”given_name”

  
   
   
   
 valueLink={this.linkState(‘given_name’)} />

  
   
   
 <br
/>

  
   
   
 <label
htmlFor=”family_name”>Family Name:</label>

  
   
   
 <br
/>

  
   
   
 <input

  
   
   
   
 type=”text”

  
   
   
   
 name=”family_name”

  
   
   
   
 valueLink={this.linkState(‘family_name’)} />

  
   
   
 <br
/>

  
   
   
 <button
type=”submit”>Speak</button>

  
   
 </form>;

    }

});

               
这种艺术便于控制表单域,把其值保存在父组件中的state中。而且,其数据流依旧与任何约束的表单成分保持一致。

               
可是选择那种格局往数据流中添加定制作用时,复杂度会追加。提出只在一定的现象下选拔。因为古板约束表单组件提供了同一的成效且更为灵敏。

    9. 自定义表单组件:

       
能够在品种中复用共有功用。也是一种将并行界面提高为一种特别错综复杂的表单组件(如单选框、多选框)的好方式。

        eg:自定义表单单选框和valueLink结合使用:

<div
className=”col-sm-10″>

  
 <PaymentDistrictSelect
valueLink={this.linkState(‘paymentDistrictCode’)}/>

</div>

    10. Focus:

       
控制表单组件的focus可以很好地指点用户依据表单逻辑稳步填写。可削减用户操作,增强可用性。

 

    11. 可用性:

        React组件平常缺乏可用性。如贫乏对键盘操作的支撑。

    12. 传达要求:

        placeholder能够用来呈现输入实例或作为没有输入时的默许值

<input type="text" name="keyword" placeholder="对账单号/预付单号" valueLink={this.linkState("keyword")} style={{width: '100%'}}/>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图