zoukankan      html  css  js  c++  java
  • react 事件绑定 es5/es6

    // vscode shift + ctrl + v 预览

    es 5 写法

    无参函数的绑定

    • first methods
      1. 定义函数:
      handleClick(e) { // e - 事件对象
          e.preventDefault();
          // doSomething ...
      }
      
      1. constructor 中绑定函数的执行上下文
      this.handleClick = this.handleClick.bind(this);
      
      1. jsx 中的调用
      <button onClick={this.hanleClick} />
      
    • second methods
      1. 定义函数
      // 同上
      
      1. jsx 中的调用
      <button onClick={this.hanleClick.bind(this)} />
      

    有参数的绑定

    • only one
      1. 定义函数
      handleClick(param1, param2, e) {
          e.preventDefault();
          // do something ...
      }
      

      注意此时无论多少个参数, e 一定放在最后

      1. jsx 中调用
      <button onClick={this.hanleClick.bind(this, 'x', 'xx')} />
      

    es 6 写法

    无参数的绑定

    • only one
      1. 定义函数:
      handleClick = (e) => {
          e.preventDefault();
          // do something ...
      }
      
      1. jsx 中调用
      <button onClick={this.hanleClick} />
      

      比起 es 5 中的无参数函数的绑定调用, es 6 不需要使用 bind 函数;

    有参数函数的绑定

    • first methods
      1. 定义函数:
      handleClick = (param1, e) => {
          e.preventDefault();
          // do something ...
      }
      
      1. jsx 中调用
      <button onClick={this.hanleClick.bind(this, 'x')} />
      

      有参数时,在绑定时依然要使用 bind;
      并且参数一定要传,不然仍然存在 this 指向错误问题;

    • second methods
      1. 定义函数:
      handleClick = (param1, e) => {
          // do something ...
      }
      
      1. jsx 中调用
      <button onClick={() => this.handleClick('c')} />
      // 如果需要对 event 对象进行处理的话,需要写成下面的格式
      <button onClick={(e) => this.handleClick('c', e)} />
      
  • 相关阅读:
    windows下python3.6环境搭建
    接口自动化(2)----如何编写接口自动化用例
    关于接口自动化测试的规则说明
    linux 常用命令 补充
    linux 常用命令
    linux 初识
    java高级教程 JDK代理和CGLIB代理两种方式 账户类
    java高级教程 实例化和非实例化 bean 学生信息
    java高级教程 俩数之和
    C++使用printf输出string类
  • 原文地址:https://www.cnblogs.com/cc-freiheit/p/10707084.html
Copyright © 2011-2022 走看看