澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站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中,要给我们推荐二个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分别做成了三个零件:

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找到父组件的原有坐标参数,然后更新父组件里面包车型大巴气象属性,况且告诉父组件能够进行拖拽了。父组件给子组件传参正是向来传送的。而子组件给父组件传参必要经过事件。所以在父组件中定义这么三个函数:

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.答辩上来讲,拖拽效果可以在任性成分中贯彻,拖拽的笔触都以千篇大器晚成律的,所以理论上来讲,拖拽各个进度的函数能够抽离出来,做成贰个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。

②特点

1、成分名首字母大写

2、相符嵌套法规

3、能够写入求值表明式

4、驼峰式命名

5、不可能利用javascript原生函数的部分首要词,如for和class。要求替换来htmlFor和className

③利用方式

1、使用动态值: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组件生命周期详解

零件本质上便是状态机,输入明确,输出一定明确。状态和结果黄金时代活龙活现对应,进而使程序变得直观。状态产生转移时会触发不一致的钩函数,进而让开荒者有空子做出响应。能够用事件的思绪来理解状态,然而事件与事件之间相互独立,但是差异景况之间恐怕会相互影响。

零件的具备情形结合起来就成了组件的生命周期。即:开端化阶段->运维中阶段->销毁阶段。

不等生命周期内足以自定义的函数

初步化阶段:

①getDefaultProps:获取暗中认可属性,只调用叁遍,是在createClass之后调用的。实例之间分享引用

②getInitialState:先河化每个实例的有意伊始化状态

③componentWillMount:mout正是装载的意趣,这几个措施的意趣正是说组件将在棉被服装载到页面中,也是render从前最终叁回修改意况的时机

④render:组件在render函数生成虚构节点,最终由react将虚构节点产生真的的节点渲染到页面上。只好访谈this.props和this.state,独有三个顶层组件,最佳不要涂改意况和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

运转中阶段:

①componentWillReceiveProps:这一个函数在组件将在选取到属性时接触的,大概是父组件的属性发生变化时,属性在传递到零部件早先,开采者有时机通过这么些函数去管理属性。比如修改,更新内部景观等。

②shouldComponentUpdate:当组件选拔到新属性只怕新景观的时候接触的。这一个是贰个疑惑函数,也正是说大家得以告知react不去立异有些组件。因为不常属性只怕状态并不会招致组件产生更新。在组件无需更新的状态下,手动使shouldComponentUpdate重临false,那样react就没有供给再通过render和diff算法去判定是还是不是要立异,进而提升品质。

③componentWillUpdate:render触发早前接触,更新组件,不可能修改属性和景观

④render:组件在render函数生成虚构节点,最终由react将设想节点变成真的的节点渲染到页面上,只可以访谈this.props和this.state,唯有二个顶层组件,最棒不用改换情况和DOM输出。

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

备注:那多少个函数的实行顺序也是从上到下的。这些的测量试验代码已上传至:

销毁阶段:

①componentWillUnmount:这些函数在销毁操作真正进行以前调用,给开辟者最终的空子开展部分清理专门的工作。

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

个性的意义:

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

事件目的介绍

动用方式:就算在编写事件指标管理函数的时候,增添二个参数。得到那一个目的之后,就由此对象的属性来能够赢得一些音信。

例如:

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 Comment博克斯 = React.createClass({ render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList /> //那是多少个零件 <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那多少个框架正是众口难调的,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引领今后的顾客分界面开垦框架》

极客大学录像课程

打赏支持本身写出越来越多好小说,感谢!

打赏我

    表单组件两种类型:约束组件和无约束组件

*通过createElement创制作而成分 HELLO Word

采用 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. 无束缚组件:

var el=React.createElement(type,[props],[children...]) 标签 属性 内容
React.render(el,document.getElementById("..."))

React JSX

您的 React JSX 代码能够献身四个独自文件上,举例大家创立三个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 组件,只需创立贰个大写字母起头的位置变量

至于笔者:winty

澳门新浦京娱乐场网站 13

前面贰个技术员,前端爱好者。博客: 个人主页 · 笔者的稿子 · 1 ·  

澳门新浦京娱乐场网站 14

有关我:winty

澳门新浦京娱乐场网站 15

后边三个技术员,前端爱好者。博客: 个人主页 · 笔者的篇章 · 1 ·  

澳门新浦京娱乐场网站 16

        eg:

*虚拟DOM

React 组件

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

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

React.createClass 方法用于转移三个组件类 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({

在编造DOM上操作 通过render来挂载到实际的DOM
组件
React.createClass(meta)
其间须要render函数

复合组件

咱俩得以因而成立多个零部件来合成三个零件,即把组件的例外效率点进展剥离。

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() {

*JSX

React State(状态)

(React 把组件看成是二个状态机(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!"/>;

JSX是对JavaScript语法的扩展,它让大家得以在JavaScript代码中以看似HTML 的情势开创React成分。
var Jsxdemo=React.createClass({
render:function(){
var html=<div>
<div className="ez-led">Hello, React!</div>
<div className="ez-led">2015-04-15</div>
<div className="ez-led">小编是第三排</div>
</div>;
return html;
}
JSX 能让大家疑似拼写字符串同样去写HTML、

React Props

state 和 props 首要的差别在于 props 是不可变的,而 state 能够依照与客户交互来改换。那正是干吗有个别容器组件须要定义 state 来更新和修改数据。 而子组件只好通过 props 来传递数据。

    }

*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 称之为 无状态组件 组件的变现都以由另外界传入的props属性 依据自个儿的情形来做出不相同的反射
var Jsxdemo=React.createClass({
render:function(){
var number=this.props.setid;
alert(number); 这里能直接出口对象里的方块字
var style={
"color":"red",
"fontSize":"12px"//这里是须要内联样式须要坚守驼峰写法去写
}
var html=<div>
<div className="ez-led" style={style}>Hello, React!</div>
<div className="ez-led">2015-04-15</div>
<div className="ez-led">小编是第三排</div>
</div>;
return html;
}
});

默认 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/>自个儿决定自个儿的值。

    ReactDOM.render(<Jsxdemo setid="11"/>,document.getElementById("jsxdemobox"));

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:

var Jsxdemo=React.createClass({
render:function(){
var style={
"color":"red",
"fontSize":"12px"//这里是要求内联样式须要根据驼峰写法去写
}
var html=<div>
<div className="ez-led" style={style}>Hello, React!</div>
<div className="ez-led">2015-04-15</div>
<div className="ez-led">小编是第三排</div>
</div>;
return html;
}
});

React 组件 API

安装景况:setState
轮换状态:replaceState
安装属性:setProps
轮换属性:replaceProps
强制更新:forceUpdate
获取DOM节点:findDOMNode
看清组件挂载状态:isMounted

var MyForm = React.createClass({

*state 状态机

设置情况: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) {

state - 组件的情景变量 保存组件的当下情况,能够再任哪一天候经过this.state来赢获得当前状态
getInitialState() - 设置组件开始状态
setState(currentState) - 设置组件当前情状 会重新渲染
//getInitialState方法来设置开首化状态 也正是安装大家的 state {key:value} 个中key代表state指向的状态变量 value代表情形
getInitialState : function(){
return {open : true};
},
//这里是经过叁个点击事件来重新设定情状机 必需求透过this.setState({option:!this.state.open}) 意思就是设置状态机的另意气风发种处境
onClick : function(){
//读取一碗水端平设状态,那将触发重新渲染
this.setState({open : !this.state.open});
},
//在render来操控大家的杜撰DOM 记得return HTML代码
render : function(){
//依据气象设置样式
img = this.state.open ? "img/switch-on.png" : img = "img/switch-off.png";

轮换状态:replaceState

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

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

        event.preventDefault();

            //返回元素
            return <img src = {img} style={{width:"150px"}} onClick={this.onClick}/>;
        }

设置属性: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;

componentWillMount() - 组件实例将要挂接(初次渲染)时被调用
这几个核心在漫天生命周期中只会被调用一遍。
componentDidMount() - 组件实例挂接(初次渲染)后被调用
以此办法在全数生命周期中只会被调用叁遍。
componentWillReceiveProps(nextProps) - 组件实例就要安装新属性时被调用
参数nextProps表示就要应用到零部件实例上的新属性值。
其后生可畏措施在首先渲染时不会被调用。在那措施内调用setState()不会引起重新渲染。
shouldComponentUpdate(nextProps, nextState) - 组件实例将要再一次渲染时被调用
参数nextProps传入将要应用到零部件实例上的新属性值,参数nextState传入组件实例将要被 设置的情景值。倘若那一个办法重临false,那么组件实例就不会被重新渲染。除非大家生硬地 知道,新的品质和景色无需进行重复渲染,不然这些艺术都应当回到true。
以此点子在初次渲染时或透过forceUpdate()方法举办渲染时不会被调用。
componentWillUpdate(nextProps, nextState) - 组件实例将要再一次渲染时被调用
本条点子在首先渲染时不会被调用。注意:不能够在那方法内调用setState()。
componentDidUpdate(prevProps, prevState) - 组件实例重新渲染后被调用
以此点子在第生机勃勃渲染时不会被调用。
componentWillUnmount() - 组件实例就要从DOM树移除时被调用
其龙腾虎跃法子在全方位生命周期中只会被调用一回。

强制更新: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 v0.14 版中 refs 指向的正是 DOM 节点,同期也会保留 .getDOMNode() 方法(带 warning),最后在 v0.15 版中去除该办法。)
首先要给你想博得DOM对象设定 ref=“q” ref 必需是全局唯大器晚成的
var el = React.findDOMNode(this.refs.q),
this.refs.q获取到的是虚拟DOM,在render方法实行之后,并且react已经实现了DOM的换代,技巧因此this.refs.city.getDOMNode() 来得到原生的DOM成分。
接纳 this.refs.xxx.getDOMNode() 或React.findDOMNode(this.refs.xxx) 能够赢得到实在的 DOM 节点。

获取DOM节点:findDOMNode

DOMElement findDOMNode()

返回值:DOM元素DOMElement

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

    }

// 之前:
// var input = this.refs.giraffe.getDOMNode();
//
// v0.14 版:0.15版本之后
var input = this.refs.giraffe;
alert(input.value);

判定组件挂载状态: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)。
componentWillReceiveProps 在组件选取到一个新的prop时被调用。那几个方式在起先化render时不会被调用。
shouldComponentUpdate 重临贰个布尔值。在组件接受到新的props大概state时被调用。在起首化时要么选择forceUpdate时不被调用。
能够在你认可无需立异组件时接纳。
componentWillUpdate在组件接纳到新的props只怕state但还并没有render时被调用。在开首化时不会被调用。
澳门新浦京娱乐场网站,componentDidUpdate 在组件达成更新后当即调用。在开端化时不会被调用。
componentWillUnmount在组件从 DOM 中移除的时候马上被调用。
以下实例在 Hello 组件加载以往,通过 componentDidMount 方法设置一个电火花计时器,每间距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。
当使用异步加载数据时,在组件卸载前应用 component威尔Unmount 来撤除未形成的央求。
以下实例演示了获得 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() 再次回到的相应的支撑实例,确定保障在其他时间总是拿到精确的实例
选拔格局
绑定贰个 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 属性加多贰个零件的引用于到 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 (

文本输入框
永不选择value属性设置文本输入框成分的初值,应当接受defaultValue:
//JSX
<input type ="text" defaultValue ="demo"/>
复选按键
毫不使用checked属性设置复选按钮的启幕选中状态,应当接纳defaultChecked:
//JSX
<input type ="checkbox" defaultChecked/>
单选按键组
不用使用option成分的selected属性设置单选按键组的开首选中状态,应当利用 select成分的defaultValue:
//JSX
<select defaultValue="A">
<option value="A">China</option>
<option value="B">India</option>
<option value="C">Japan</option>
</select>

            <form onSubmit={this.submitHandler}>

*容器组件

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

在ReactDOM.render里面 ,组件要成双标签 {this.props.children}用于获取到我们的React的 子成分

                <br />

ReactDOM.render(<Jsxdemo setid="11">作者是容器组件</Jsxdemo>,document.getElementById("jsxdemobox"));
var Jsxdemo=React.createClass({
componentDidMount:function(){
var message=this.refs.bbbb;
// alert(message.value);
},
render:function(){
var number=this.props.setid;
// alert(number);
var style={
"color":"red",
"fontSize":"12px"//这里是讲求内联样式须要遵照驼峰写法去写
}
var html=<div>
<div className="ez-led" style={style}>{this.props.children}</div>
<div className="ez-led" ref="aaaa">2015-04-15</div>
<input type="text" className="ez-led" ref="bbbb" defaultValue="笔者是第三排"/>
</div>;
return html;
}
});

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

ReactDOM.render(<Jsxdemo setid="11">我是容器组件</Jsxdemo>,document.getElementById("jsxdemobox"));

            </form>

*JSX可开展属性

        );

大家得以再render里面

    }

<div className="ez-slider" onMouseDown ={this.onMouseDown} onMouseMove ={this.onMouseMove} onMouseUp ={this.onMouseUp}/>
相等于
var props ={
className :"ez-slider",
onMouseDown :this.onMouseDown,
onMouseUp :this.onMouseUp,
onMouseMove :this.onMouseMove
};

});

//传入属性包
var rel =<div {...props}></div>;

    2. 约束组件:

var Jsxdemo=React.createClass({
// getInitialState:function(){

        约束组件的方式与React别的门类组件的情势风度翩翩致。表单的景况交由React组件调整。状态值被存放在React组件的state中。

        // },
        componentDidMount:function(){
            var message=this.refs.bbbb;
            // alert(message.value);
        },
        onClick:function(){
            alert(0);
        },
        render:function(){
            var number=this.props.setid;
            // alert(number);
            var style={
                "color":"red",
                "fontSize":"12px"//这里是要求内联样式需要按照驼峰写法去写
            }
            var options={
                className:"ez-led",
                onClick:this.onClick
            }
            var newhtml=<div {...options}>22222</div>;
            return newhtml;
        }
    });

ReactDOM.render(<Jsxdemo setid="11">我是容器组件</Jsxdemo>,document.getElementById("jsxdemobox"));

        约束组件能越来越好的支配表单组件。在封锁组件中,输入框的值是由父组件社设置的。

动画片 CSS3 transition 思路正是选取情状机来剖断 DOM状态
为因素表明transition样式
设置属性伊始值,第4回渲染成分
安装属性指标值,第二回渲染成分

        eg:

*暗中同意属性

var MyForm = React.createClass({    

getDefaultProps:是设置暗许属性 海军蓝为有关代码
比如设置了value 则 弹出 10 若无设置 则 弹出 20

    getInitialState: function() {

var ZZ=React.createClass({
    getDefaultProps:function(){
        return {
            value:20
        }
    },
    onClick:function(){
        alert(0);
    },
    render:function(){
        alert(this.props.value);
        var option={
            className:"maincsss",
            onClick:this.onClick
        }
        var html=<div {...option}>111111</div>;
        return html;    
    }
});
ReactDOM.render(<ZZ value="10"/>,document.getElementById("mainbox"));

mixin复用代码      meisen发音  混合柔和的意思  专门用来写公共模块的对象 并且通过minxins指向您的 mixin对象 来拷贝你的React组件中

        return {

varEzLoggerMixin={
log:function(){
//sth. happened here.
}
};
React.createClass({
mixins:[EzLoggerMixin],
render:function(){
//your render stuff.
}
});

            helloTo: "Hello World!"

//mixin正是贮存公共技能的三个粗略的对象而已。首字母可一点都不大写 不过为着养成习于旧贯 首字母依然大写的好 哦
var Minxintext={
log:function(){
alert("我是mixin");
}
};
mixins : [Minxintext],
然后在React实例之中的生命周期或然事件函数里面 通过 this. 你定义的mixin对象内部的函数

        };

var Minxintext={
log:function(){
alert("我是mixin");
}
澳门新浦京娱乐场网站js实现原生js拖拽效果及思考,js深入学习详细解析。};
var ZZ=React.createClass({
mixins : [Minxintext],
getDefaultProps:function(){
return {
value:20
}
},
onClick:function(){
this.log();
},
render:function(){
// alert(this.props.value);
var option={
className:"maincsss",
onClick:this.onClick
}
var html=<div {...option}>111111</div>;
return html;
}
});
ReactDOM.render(<ZZ value="10"/>,document.getElementById("mainbox"));

    }

map 循环

    handleChange: function(event) {

return (
<span>
{
datas.map(function(i){
return <span {...option} key={i.id}>我是{i.name}a a a </span>;
})
}
</span>
)

        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为组件提供贰个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可以很好地指导客商依照表单逻辑稳步填写。可减掉客户操作,加强可用性。

 

澳门新浦京娱乐场网站js实现原生js拖拽效果及思考,js深入学习详细解析。    11. 可用性:

        React组件日常贫乏可用性。如缺乏对键盘操作的帮忙。

    12. 传达供给:

        placeholder可以用来展现输入实例或当做没有输入时的默许值

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

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站js实现原生js拖拽效果及思