React 0.13 sınıf yöntemi tanımsız

Question

Bu yüzden React ve ES6 ile başladım ve çok temel bilgilerle takıldım. Bazı yardımlar için minnettarım. this içeride undefined olduğunu

Uncaught TypeError: Cannot read property 'handleClick' of undefined 

kod

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

sizin kod katı modda (modüller katı modda her zaman) olduğu için izler:

handleClick() bir hata atar .map'a ilettiğiniz işlev.

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

Veya bir arrow function kullanın::

Ya

açıkça second argument to .map geçirerek bağlamı ayarlamak zorunda Sen bileşenine bir bileşen yöntemi bağlayıcı

{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():. Tepki, sizin için yüksek performanslı bir şekilde otomatik olarak yapar, böylece bu aramayı güvenle kaldırabilirsiniz. Blueball

yüzden sadece bu gibi

Bkz: bana yardımcı do

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