React框架的点击事件（方式）

import React from 'react';
import "./assets/css/app.css"


class App extends React.Component {
    constructor() {
        super();
        this.state={
            isActive:false,
            left:50,
            top:100,
            amount:1
        };
        this.startX=0;
        this.startY=0;
    }
    click(val){
        alert(val);
    }
    //箭头函数
    clickes6=()=>{
        alert('点击事件箭头函数');
    }
    //鼠标放在上面
    mouseOver(){
        this.setState({isActive:true});
    }
    //鼠标移出
    mouseOut(){
        this.setState({isActive:false});
    }
    //鼠标移动
    mouseMove(e,move){
        console.log(e.pageX,e.pageY,move);
    }
    //移动端触摸
    touchStart(e){
        console.log(e.touches[0].pageX,e.touches[0].pageY);
        this.setState({isActive:false})
        this.startX=e.touches[0].pageX-this.state.left;
        this.startY=e.touches[0].pageY-this.state.top;
    }
    //移动端移动
    touchMove(e){
        console.log(e.touches[0].pageX,e.touches[0].pageY);
        this.setState({left:e.touches[0].pageX-this.startX,top:e.touches[0].pageY-this.startY});
    }
    //移动端抬起
    touchEnd(){
        this.setState({isActive:true})
    }
    changeAmount(e){
        console.log(e.target.value);
        //正则表达式限制格式(非数字过滤)
        let amount=e.target.value.replace(/[^\d]/g,'');
        if(amount==='' || amount==='0'){
            amount=1;
        }
        this.setState({amount:amount});
    }
    //render()
    render() {
        return (
            <div className="App">
                <button type="button" onClick={this.click.bind(this,'点击事件传参')}>点击事件</button>
                <button type="button" onClick={this.clickes6}>点击事件es6</button>
                <button type="button" onClick={()=>{this.click('点击事件方式二')}}>点击事件方式二</button>
                <div className={this.state.isActive?"box active":"box"}
                     onMouseOver={this.mouseOver.bind(this)}
                     onMouseOut={this.mouseOut.bind(this)}
                     onMouseMove={(e)=>{this.mouseMove(e,'move')}}
                     onTouchStart={(e)=>{this.touchStart(e)}}
                     onTouchMove={(e)=>{this.touchMove(e)}}
                     style={{left:this.state.left+'px',top:this.state.top+"px"}}
                     onTouchEnd={this.touchEnd.bind(this)}
                     ></div>
                <div>数量<input type="text" Value={this.state.amount}
                              onChange={(event)=>{this.changeAmount(event)}}/> <br/>
                              数量值:{this.state.amount}
                    </div>
            </div>
        )
    }
}

    export default App;

.box{width:100px;height: 100px;background-color: #0000FF;position: absolute;z-index:1;left:0;top:0}
.box.active{background-color: red}