React事件处理

事件处理

React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:
1、React事件绑定属性的命名采用驼峰式写法，而不是小写。
2、如果采用 JSX 的语法需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)。

<button onClick={activateLasers}>
  Activate Lasers
</button>

[注意] 在 React 中不能使用return false 的方式阻止默认行为。必须明确的使用 preventDefault。

【绑定this】
　　可以使用bind()方法：

this.handleClick = this.handleClick.bind(this);

  也可以使用属性初始化器语法：

  handleClick = () => {
    console.log('this is:', this);
  }

【传递参数】
　　以下两种方式都可以向事件处理程序传递参数：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id, e)}>Delete Row</button>

[注意]通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面。

class Popper extends React.Component{
    preventPop(name, e){   
        e.preventDefault();
        alert(name);
    }
    render(){
        return (<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
        );
    }
}

【原生事件对象】

handleClick(e){
  e.nativeEvent
}