Reactjsのクリックイベントの問題

Question

これはおそらく何か本当に簡単なことになるでしょう。しかし、私は、自分の反応成分がどのように書かれているか、何が間違っているかを理解するのに苦労しています。ここにコンポーネントコードがあります。

import React, { Component, PropTypes } from 'react'; 
import styles from './Menu.css'; 
import SubMenu from './SubMenu'; 
import classNames from 'classnames/bind'; 

let cx = classNames.bind(styles); 

export default class Menu extends Component{ 
static propTypes ={ 
    menuData:PropTypes.array.isRequired 
}; 


constructor(props){ 
super(props); 
this.state = {menuOpenedLabel:""}; 
}; 
menuClick(label){ 
    this.state.menuOpenedLabel = label; 
}; 

render(){ 
    let menus = this.props.menuData.map(function(menuItem){ 
    let handleClick = this.menuClick.bind(this,menuItem.label); 
    return (<li key={menuItem.label}> 
    <a onClick={handleClick}>{menuItem.label}</a> 
    <SubMenu subMenu={menuItem.submenu} isVisible={this.state.menuOpenedLabel === menuItem.label}/> 
    </li>); 
    }); 

return (<nav> 
    <ul className={styles.menu}>{(menus)}</ul> 
</nav>); 
} 
} 

これは私がchromeで取得するエラーです。まず

Uncaught TypeError: Cannot read property 'menuClick' of undefined 

私はこのコードが正しいことを明らかにそれが原因で、マップ機能のthis内部を使用するのではと思ったが、。このリンクに基づいています。

https://facebook.github.io/react/tips/expose-component-functions.html

任意の考え？

Answer 1

私はそれを理解しました！これの値が何であるかを制御するmap（）の2番目のパラメータがあります。

Answer 2

コンポーネントは問題ありませんが、マップの内容は時々見落とすことがあります。私はこれをコードの有益な塊であると思っています。あなたがすでにそれを理解したにもかかわらず助けになるかもしれません:)マップを整理してインデックスを取得するだけの方法です。

render() { 
    const { stuffs } = this.state; 
    return (
     <div> 
     {stuffs.map((stuff, i) => { 
      return(
       <Components key={i} funStuff={stuff.fun} /> 
     ); 
     })} 
     </div> 
    ) 
}