JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – React 0.13类方法未定义大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我从React和ES6开始,并且陷入了非常基础的困境.真的很感激一些帮助.

handleClick()抛出一个错误:

Uncaught TypeError: CAnnot read property 'handleClick' of undefined

代码如下

export default class MenuItems extends React.Component {

  constructor(props) {
    super(props)
    this.state = {active: falsE}
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({ active: !this.state.active });
  }

  render() {
    let active = this.state.active
    let menuItems = [{text: 'Logo'},{text:  'promo'},{text:     'benefits'},{ text: 'form'}]
    return (
      <ul>
        {menuItems.map(function(item) {
          return <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.iD}>{item.text}</li>;
        })}
      </ul>
    );
  }
}

解决方法

{menuItems.map(function(item) {
  return <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.iD}>{item.text}</li>;
})}

因为您的代码处于严格模式(模块始终处于严格模式),所以在传递给.map的函数中未定义.

您必须通过传递second argument to .map来显式设置上下文:

{menuItems.map(function(item) {
  // ...
},this)}

或使用arrow function

{menuItems.map(
     item => <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.iD}>{item.text}</li>
)}

大佬总结

以上是大佬教程为你收集整理的javascript – React 0.13类方法未定义全部内容,希望文章能够帮你解决javascript – React 0.13类方法未定义所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。