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 >
               ...
            )
        }
    }
  • 相关阅读:
    [模板]大数加法
    HDU 1848 Fibonacci again and again
    同时安装了Python2和Python3时的pip使用
    UPC-2785 One-Way Roads(最大流建图)
    UPC-2784 Model Railroad(最小生成树)
    【ICPC 2017 Daejeon】UPC-9312 Game Map(dfs)
    【ICPC 2015 Shenyang】UVALive
    【ICPC 2015 Shenyang 】UPC-9254 MEETING(最短路&虚点建图)
    UPC-9264 Chip Factory(01字典树)
    【ICPC 2018 Malaysia】UPC-9302 ELI'S CURIOUS MIND(递推)
  • 原文地址:https://www.cnblogs.com/xiaochengzi/p/9674709.html
Copyright © 2011-2022 走看看