React 学习-4

昵称duu2024-05-10 11:57

1.事件处理,传入函数作为事件处理函数

javascript 复制代码

<button onClick={activateLasers}>
  激活按钮
</button>

注意事项：（1）阻止默认行为必须使用preventDefault,不能使用return false

（2）ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法

（3） JSX 回调函数中类的方法默认是不会绑定 this 的，使用时应该为方法绑定 this（使用bind、属性初始化器、在回调函数中使用箭头函数）

javascript 复制代码

构造器中绑定this示例：

    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    this.handleClick = this.handleClick.bind(this);

方法中绑定this示例一：
render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }

方法中绑定this示例二：
render() {
    //  这个语法确保了 `this` 绑定在  handleClick 中
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }

事件传递参数

javascript 复制代码

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

箭头函数中，参数e作为react事件对象显示传递，在bind传参方式中，e会被隐式传递同时排在参数后边