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)} />
      
  • 相关阅读:
    微信小程序中 数据缓存
    javascript 数组去重方法
    常用网站 ---总结
    vue面试题
    vue创建项目(命令方式)
    shutil 模块:文件复制.移动.压缩.解压.递归删除文件夹
    面向对象一些零散的知识点
    面向对象之多态
    面向对象与继承
    序列化与反序列化的三个模块:json pickle shelve
  • 原文地址:https://www.cnblogs.com/cc-freiheit/p/10707084.html
Copyright © 2011-2022 走看看