zoukankan      html  css  js  c++  java
  • React map生成元素添加点击事件绑定this

    问题

    使用.map(function(Item)生成元素添加onClick事件:onClick={this.provinceChange.bind(this, "99")}时,前台访问报错:Uncaught TypeError: Cannot read property 'provinceChange' of undefined
    provinceChange是在class中定义的方法:

    
    provinceChange: function(selectedProvince){
      this.setState({
        province : selectedProvince
      });
    },
    
    

    解决

    原调用provinceChange方法代码如下:

    
    render: function() {
      let waveProvinceArr = this.state.waveProvinceList;
      return (
        <div>
          <div>
            {
              waveProvinceArr.map(function(waveProvinceItem){
                return <button type="button" onClick={this.provinceChange.bind(this, waveProvinceItem)}>{waveProvinceItem}</button>
              })
            }
          </div>
        </div>
      );
    }
    
    

    通过分析为this在嵌套函数中,而嵌套函数可以通过闭包捕获父函数的变量,但是这个函数没有继承this,所以导致this指向不明报错undefined
    修改方法有:
    1、bind(this)

    
    {
      waveProvinceArr.map(function(waveProvinceItem){
        return <button type="button" onClick={this.provinceChange.bind(this, waveProvinceItem)}>{waveProvinceItem}</button>
      }.bind(this))
    }
    

    2、将this做为参数传入:

    
    {
      waveProvinceArr.map(function(waveProvinceItem){
        return <button type="button" onClick={this.provinceChange.bind(this, waveProvinceItem)}>{waveProvinceItem}</button>
      }, this)
    }
    

    3、在render中将this捕获为self,使用this时改为使用self

    
    render: function() {
      let waveProvinceArr = this.state.waveProvinceList;
      let self = this;
      return (
        <div>
          <div>
            {
              waveProvinceArr.map(function(waveProvinceItem){
                return <button type="button" onClick={self.provinceChange.bind(self, waveProvinceItem)}>{waveProvinceItem}</button>
              })
            }
          </div>
        </div>
      );
    }
    

    4、将waveProvinceArr.map(function(waveProvinceItem)方法换成在render或者方法中使用push生成:
    可以参考:【原】React中,map出来的元素添加事件无法使用

    参考文章

    JavaScript中的this陷阱的最全收集--没有之一
    严格模式详解
    MDN中Function.prototype.bind()

    来源:https://segmentfault.com/a/1190000011703112

  • 相关阅读:
    2-6 R语言基础 缺失值
    2-5 R语言基础 factor
    2-4 R语言基础 列表
    2-3 R语言基础 矩阵和数组
    2-2 R语言基础 向量
    【转】Python操作MongoDB数据库
    Python程序的执行原理
    数据分析的职业规划
    自定义菜单 开发 服务器繁忙
    微信自定义菜单
  • 原文地址:https://www.cnblogs.com/lovellll/p/10162097.html
Copyright © 2011-2022 走看看