React 0.13 metodo di classe non definito

Question

Quindi ho iniziato con React ed ES6 e sono rimasto bloccato con le nozioni di base. Apprezzo davvero un po 'di aiuto.

handleClick() genera un errore:

Uncaught TypeError: Cannot read property 'handleClick' of undefined 

codice segue

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>; 
})} 

Poiché il codice è in modalità rigorosa (i moduli sono sempre in modalità rigorosa), this è undefined all'interno la funzione si passa a .map.

O si deve impostare in modo esplicito il contesto passando un second argument to .map:

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

o utilizzare un arrow function:

{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(): si sono vincolanti un metodo componente per componente. React fa questo automaticamente per te in un modo ad alte prestazioni, così puoi tranquillamente rimuovere questa chiamata. Vedere Blueball

così proprio come questo:

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