react中绑定事件

render() {
  return (
    // 这样绑定在方法中，this指向会发生变化
    <button onClick={this.handleClick}>点击</button>  
  )
}

绑定事件处理函数的this到当前组件

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name:"老大",
            age: 0
        };
        // 在constructor中提前对事件进行绑定
        this.addOneClick=this.addOneClick.bind(this);
    }
    
    addOneClick(e) {
        e.preventDefault();
        this.setState({ age: this.state.age + 1 });
    }
    
    //在此处采用箭头函数写法
    arrow = (e) => {
        e.preventDefault();
        this.setState({ age: this.state.age + 1 })
    }
    
    render() {
        return <div>
            // 通过bind方法进行原地绑定，从而改变this指向
            <a href="#" onClick={this.addOneClick.bind(this)}>点我啊</a>
            // 通过箭头函数
             <a href="#" onClick={e => this.addOneClick(e)}>点我啊</a>
            //  addOneClick方法在constructor中已经绑定
            <a href="#" onClick={this.addOneClick}>点我啊</a>
            // 箭头函数写在方法里面
            <a href="#" onClick={this.arrow}>点我啊</a>
        </div>;
    }
}

注意事项

React 事件绑定属性的命名采用驼峰式写法（如：onClick,onKeyUp），而不全是小写字母。
在React当中，return false不会阻止事件的默认行为，需要调用 e.preventDefault();

事件传值

    render() {
        return <div>
            // bind方法传参
            <a href="#" onClick={this.addOneClick.bind(this, 'abc')}>点我啊</a>
            // 箭头函数传参
             <a href="#" onClick={(e, 'abc') => this.addOneClick(e, 'abc')}>点我啊</a>
        </div>;
    }

事件总览

事件类	事件名称	描述

鼠标类	onClick	点击事件
	onContextMenu	只有 Firefox 中支持 contextmenu 属性
	onDoubleClick	双击事件
	onMouseDown	事件会在鼠标按键被按下时发生
	onMouseEnter	事件会在鼠标划入时发生
	onMouseLeave	事件会在鼠标划出时发生
	onMouseMove	事件会在鼠标移动的时候发生
	onMouseOut	事件会在鼠标划出时发生
	onMouseOver	事件会在鼠标穿透的时候发生
	onMouseUp	事件会在鼠标松开的时候发生
拖拽类	onDrop	该事件在元素正在拖动时触发
	onDrag	该事件在拖动元素放置在目标区域时触发
	onDragEnd	该事件在用户完成元素的拖动时触发
	onDragEnter	该事件在拖动的元素进入放置目标时触发
	onDragLeave	该事件在拖动元素离开放置目标时触发
	onDragOver	该事件在拖动元素在放置目标上时触发
	onDragStart	该事件在用户开始拖动元素时触发
键盘	onKeyDown	某个键盘按键被按下。
	onKeyPress	某个键盘按键被按下并松开。
	onKeyUp	某个键盘按键被松开。
剪切类	onCopy	该事件在用户拷贝元素内容时触发
	onCut	该事件在用户剪切元素内容时触发
	onPaste	该事件在用户粘贴元素内容时触发
表单类	onChange	该事件在表单元素的内容改变时触发
	onInput	元素获取用户输入时触发
	onSubmit	表单提交时触发
焦点事件	onFocus	聚焦的时候出发
	onBlur	失焦的时候触发
UI元素类	onScroll	当文档被滚动时发生的事件。
滚动	onWheel	该事件在鼠标滚轮在元素上下滚动时触发
组成事件	onCompositionEnd	输入完成时触发
	onCompositionStart	输入开始时触发
	onCompositionUpdate	输入进行中触发