事件处理函数

js中事件处理函数写法:

class BtnComponets extends React.Component {

    constructor(props) {
        super(props)
        //js中的方法当作为事件函数需要绑定this
        this.actionClick = this.actionClick.bind(this)
    }

    actionClick(e) {
        console.log('The link was clicked.');
        console.log(this)
    }

    render() {
        return(
            <a href="#" onClick={this.actionClick}> Click Me </a>
            // <button onClick = {this.actionClick}> 这是一个按钮 </button>
        )
    }
}

注意:

类的方法 默认不会绑定this 当把其传到事件函数中，当调用此函数时 其值默认为undefined，因此需要在构造方法中对其绑定。(在传入事件回调函数时进行绑定的话,会在每次使用此组件时就进行一次绑定 浪费性能)

作为事件处理函数传入时,传入的是函数名而不是执行函数，例如传入的是onClick={this.actionClick}而不是onClick={this.actionClick}，你也可以这么写onClick={()=>{this.actionClick()}}，但是样每次都会创建一个函数,不推荐这么写

阻止默认行为

在React中另一个不同是你不能使用返回false的方式阻止默认行为。你必须明确的使用 preventDefault

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}