react事件

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

注意事项

1. React 事件绑定属性的命名采用驼峰式写法（如：onClick,onKeyUp），而不全是小写字母。
2. 在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>;
    }

事件总览