问题
使用.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()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。