ES6/React Zweiter Artikel Bindung schlägt fehl

Question

Ich habe ein paar Komponenten hier. Die übergeordnete Komponente (Dropdown) verfügt über zwei Unterkomponenten mit jeweils einem Klickereignis, das innerhalb des Dropdown-Menüs ausgelöst wird. Ich habe keine Probleme mit dem ersten Klick-Ereignisse (handelt), aber die Bindung scheint für die zweite Klickereignis (handleItemClick)

Fehler zum Scheitern verurteilt:

Dropdown.js:57 Uncaught TypeError: Cannot read property 'handleItemClick' of undefined 

Geordnete Komponente (Dropdown):

export class Dropdown extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { open: false }; 

    this.handleClick = this.handleClick.bind(this); 
    this.handleItemClick = this.handleItemClick.bind(this); 
    } 
    handleClick() { 
    this.setState({ open: !this.state.open }); 
    } 
    handleItemClick() { 
    console.log("anything"); 
    } 
    render() { 
    let list = this.props.items.map(function(item) { 
     return <ListItem item={item} key={item} whenItemClicked={this.handleItemClick}/> 
    }); 
    return (
     <div className="dropdown"> 
     <Button 
      className="btn-default" 
      title={this.props.title} 
      subTitleClassName="caret" 
      whenClicked={this.handleClick} /> 
     <ul className={"dropdown-menu " + (this.state.open ? "show" : "")}> 
      {list} 
     </ul> 
     </div> 
    ); 
    } 
} 

Untergeordnete Komponente (ListItem), das entsprechende Click-Ereignis dieses Elements ist dasjenige, das nicht binden kann.

export class ListItem extends Component { 
    render() { 
    return (
     <li><a onClick={this.props.whenItemClicked}>{this.props.item}</a></li> 
    ); 
    } 
} 

Second Child Komponente, die dies entsprechendes Klick-Ereignis Stück arbeitet

export class Button extends Component { 
    render() { 
    return (
     <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button"> 
     {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span> 
     </button> 
    ); 
    } 
} 

Dies ist wahrscheinlich etwas offensichtlich, dass ich mit Blick auf. Jede Hilfe würde sehr geschätzt werden!

Answer 1

map bindet this an die Funktionsaufrufer, die das Array ist. this innerhalb map mit geschrieben ist das Array nicht die Komponente.

Verwenden Sie stattdessen eine Pfeilfunktion, die das 'lexikalische' this, das umgebende this, das Ihre Komponente ist, behält.

let list = this.props.items.map(item => { 
    return <ListItem whenItemClicked={this.handleItemClick}/> 
});