zoukankan      html  css  js  c++  java
  • React内三种函数的写法

     以下提供三种React内函数的写法,都可以正常运行,有疑问可以留言

    写法一:让函数内部的this指向这个类的实例,它是用bind实现的,bind的第一个参数表示context,就是this。 

    //写法一
    class ManageAddress extends React.Component {
    
        constructor(props) {
            super(props);
            this.handleChangeAddressType = this.handleChangeAddressType.bind(this)
    ... }
    /** * 切换地址类型,重新获取地址列表 * @param key */ handleChangeAddressType(key) { ... }; render() { return ( ... <button onClick={this.handleChangeAddressType}>测试 </button > ... ) }
    }

    写法二:相当于让handleChangeAddressType的值为一个箭头函数,所以调用处直接传入这个值就可以,注意不能加括号会报错。而箭头函数的特性我们都知道:它不会自己创建this,它会从自己的作用域链上层继承this,这里this就会指向这个类的实例。这不是js标准写法,但是babel已经支持了。

    //写法二
    class ManageAddress extends React.Component {
    
        constructor(props) {
            super(props);
            ...
        }
    
        /**
         * 切换地址类型,重新获取地址列表
         * @param key
         */
        handleChangeAddressType = (key) =>{
         ...
        };
    
      render() {
            return (
                ...
                <button onClick={this.handleChangeAddressType}>测试
                </button >
               ...
            )
        }
    }

    写法三:在调用处使用箭头函数,与第二种方法类似

    //写法三
    class ManageAddress extends React.Component {
    
        constructor(props) {
            super(props);
            ...
        }
    
        /**
         * 切换地址类型,重新获取地址列表
         * @param key
         */
        handleChangeAddressType(key) {
         ...
        };
    
      render() {
            return (
                ...
                <button onClick={(key)=>this.handleChangeAddressType(key)}>测试
                </button >
               ...
            )
        }
    }
  • 相关阅读:
    Redhat Lighttpd安装配置
    PHP正则表达式学习参考的文章
    50点提高PHP编程效率 引入缓存提升性能
    位运算符C语言
    Redhat Mongodb学习笔记
    Redhat Cacti安装配置
    HTTP 状态代码表示什么意思?
    map容器对象插入数据的4种方式
    socket网络间通信初识
    仿美团项目-第一部分
  • 原文地址:https://www.cnblogs.com/xiaochengzi/p/9674709.html
Copyright © 2011-2022 走看看