React 0.13類方法未定義

Question

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

Answer 1

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

因為您的代碼處於嚴格模式（模塊始終處於嚴格模式）， this在傳遞給.map的函數中undefined 。

您必須通過將第二個參數傳遞給.map來顯式設置上下文：

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

或使用箭頭功能 ：

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

Answer 2

react.js:18794 Warning: bind():您正在將組件方法綁定到組件。 React會以高性能方式自動為您執行此操作，因此您可以安全地刪除此調用。 見BlueBall

就像這樣：

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