mouse move the circle springmove

mytest1.js

/*
*
刘明泰
mail:[email protected]
github:lazyTai
*/
import React from 'react';
import {Motion, spring} from 'react-motion';
import './css.css'


const springSetting = {stiffness: 180, damping: 10};
const cc = console
export default class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isPressed: false,
            mouseXY: [0, 0]
        };
    };

    onMouseDown(e) {
        e.preventDefault()
        var {pageX, pageY} = e;
        this.setState({
            isPressed: true,
            mouseXY: [pageX, pageY]
        })

    }

    onMouseMove(e) {
        var {pageX, pageY} = e;
        if (this.state.isPressed) {
            this.setState({
                mouseXY: [pageX, pageY]
            })
        }
    }

    onMouseUp(e) {
        this.setState({
            isPressed: false
        })
    }

    getStyles() {
        var {mouseXY} = this.state
        return {
            translateX: spring(mouseXY[0], springSetting),
            translateY: spring(mouseXY[1], springSetting),
        }
    }

    render() {
        return <div className="boxWrapper"
                    onMouseMove={this.onMouseMove.bind(this)}
                    onMouseUp={this.onMouseUp.bind(this)}
        >
            <Motion
                style={this.getStyles()}
            >
                {({translateX, translateY, scale, boxShadow}) =>
                    <div className="box"
                         onMouseDown={this.onMouseDown.bind(this)}
                         style={{
                             WebkitTransform: `translate3d(${translateX}px, ${translateY}px, 0)`,
                             transform: `translate3d(${translateX}px, ${translateY}px, 0)`,
                         }}
                    ></div>
                }
            </Motion>

        </div>
    }
}