Dieser Bereich in einer einfachen React-Komponente

Question

Haben Sie ein Problem mit, denke ich, Umfang, wenn es um dieses.onItemClick in meiner Filter-Komponente geht.

Fehler erhalten "onItemClick ist nicht definiert".

Hier ist der Code für die Filterkomponente.

var Filter = React.createClass({ 
getDefaultProps() { 
    return { 
     filterList: [], 
     name: '' 
    }; 
}, 
onItemClick(event) { 
    event.currentTarget.style.backgroundColor = '#f00'; 
}, 
render() { 
    return (
     <div className="filterCloud quarter-section"> 
      <h3>{this.props.name}</h3> 
      <ul> 
       {this.props.filterList.map(function(listValue) { 
        return <li onClick={this.onItemClick}>{listValue}</li>; 
       })} 
       </ul> 
     </div> 
    ) 
}}); 

Answer 1

Sie this für .map Rückruf festlegen sollte, denn jetzt this zu globalen Bereich bezieht sich (in-Browser ist es window oder undefined, wenn Sie verwenden strict mode)

this.props.filterList.map(function(listValue) { 
    return <li onClick={this.onItemClick}>{listValue}</li>; 
}, this); 
    ^^^^^ 

Answer 2

können Sie verwenden binden hier

var Filter = React.createClass({ 
getDefaultProps() { 
    return { 
     filterList: [], 
     name: '' 
    }; 
}, 
onItemClick(event) { 
    event.currentTarget.style.backgroundColor = '#f00'; 
}, 
render() { 
    return (
     <div className="filterCloud quarter-section"> 
      <h3>{this.props.name}</h3> 
      <ul> 
       {this.props.filterList.map(function(listValue) { 
        return <li onClick={this.onItemClick}>{listValue}</li>; 
       }.bind(this))} 
       </ul> 
     </div> 
    ) 
}}); 

Answer 3

sollten Sie this an Ihre anon binden ymous Funktion.

Try this:

{this.props.filterList.map(function(listValue) { 
        return <li onClick={this.onItemClick}>{listValue}</li>; 
       }.bind(this))} 

oder mit den Pfeilfunktion (automatisch macht den Job):

{this.props.filterList.map((listValue) => { 
     return <li onClick={this.onItemClick}>{listValue}</li>; 
    } 
)} 

Answer 4

Wenn Sie babel verwenden, können Sie arrow functions verwenden können:

var Filter = React.createClass({ 
    getDefaultProps() { 
    return { 
     filterList: [], 
     name: '' 
    }; 
    }, 
    onItemClick(event) { 
    event.currentTarget.style.backgroundColor = '#f00'; 
    }, 
    render() { 
    return (
     <div className="filterCloud quarter-section"> 
     <h3>{this.props.name}</h3> 
     <ul> 
      {this.props.filterList.map((listValue) => 
      <li onClick={this.onItemClick}>{listValue}</li> 
     )} 
     </ul> 
     </div> 
    ); 
    } 
});