本文环境：

• windows10、react16

• 本文适用于所有品牌的电脑。

辅助工具介绍：

辅助工具主要就是是开发过程变得高效，而且酷炫的。在这个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

配置及解释如图：

定义组件构建页面

备注：这里的代码说明均在react相关模块安装好的情况下.

效果图：

组件拆分思路：

我当时觉得组件拆分得细一点好，所以我把input、button分别做成了一个组件：

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;

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直接写比较好。

写好之后的父组件：

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找到父组件的原始坐标参数，然后更新父组件里面的状态属性，并且告诉父组件可以进行拖拽了。

父组件给子组件传参就是直接传递的。而子组件给父组件传参需要通过事件。所以在父组件中定义这么一个函数：

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

而子组件需要绑定这个函数，如上面的代码:callbackParent={this.onChildChanged}

在子组件中，响应的函数为：

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;
        this.props.callbackParent(newState);
}

这样，在子组件中就启动了拖拽开关，并且已经更新了from的相关参数，from的两外两个事件，move和endDrag分别为：

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
    });
}

完成。