React 0.13类方法未定义

时间:2015-04-09 21:27:27

标签: javascript reactjs ecmascript-6

所以我从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>
    );
  }
}

2 个答案:

答案 0 :(得分:12)

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

由于您的代码处于严格模式(模块始终处于严格模式),因此this在您传递给undefined的函数内为.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>
)}

答案 1 :(得分:0)

react.js:18794 Warning: bind():您正在将组件方法绑定到组件。 React会以高性能方式自动为您执行此操作,因此您可以安全地删除此调用。见BlueBall

就像这样:

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