這個範圍在一個簡單的React組件中

Question

當我在Filter組件中使用this.onItemClick時，遇到了一個問題，我認爲這個問題。

獲取錯誤「onItemClick未定義」。

下面是Filter組件的代碼。

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

您應該設置this爲.map回調，因爲現在this是指全球範圍內（在瀏覽器，它是window，或undefined如果使用strict mode）

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

Answer 2

可以使用綁定在這裏

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

你應該綁定this到你的匿名ymous功能。

試試這個：

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

或使用箭頭功能（自動做這項工作）：

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

Answer 4

如果您正在使用babel，您可以使用arrow functions：

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