react建立拖动模块

react不断更新,出现很多新方法,也会有旧的用不了的,找来找去,很多经验帖都因为时效性不好用了。
今天发文做个react的拖动模块,目前用的是最新版本15.5.4


import React,{ Component } from 'react';

class HomePage extends Component{
    constructor(props) {
        super(props);
        this.state = {
            left:20,
            top:150,
            x:0,
            y:0,
            disX:0,
            disY:0,
            move:false
        };
        this.mouseDownfn = this.mouseDownfn.bind(this);
        this.mouseMoveFn = this.mouseMoveFn.bind(this);
        this.mouseUpFn = this.mouseUpFn.bind(this);
    }
    mouseDownfn(ev){
        this.setState({disX:ev.pageX-this.state.left,disY:ev.pageY- this.state.top,move:true});
    }
    mouseMoveFn(ev){
        if(this.state.move){
            this.setState({left:ev.pageX-this.state.disX,top:ev.pageY-this.state.disY})
        }
    }
    mouseUpFn(ev){
        if(this.state.move){
            this.setState({move:false})
        }
    }
    render(){
        return (
{this.state.left}- {this.state.top}
) } } export default HomePage;
如果用这种方法创建组件,下面必须要绑定this,不然方法里是访问不到this的


详细可参考官网

https://facebook.github.io/react/docs/react-without-es6.html



方法里面可以直接用event事件,在方法里,如果想修改state,需要用setstate


随机浏览