組件的「渲染功能」內的「this」

Question

class GenreDropdown extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     genre: this.props.genres[0].genre 
    } 

    this.onGenreSelected = this.onGenreSelected.bind(this); 
    } 

    onGenreSelected(event) { 
    console.log("genre selected!!"); 
    } 

    render() { 
    return (
     <div className="genre-dropdown"> 
     {this.props.genres.map(function (genreUrlPair, idx) { 
      return (
      <div 
       className="genre-item" 
       onClick={this.onGenreSelected} <== this is undefined!! 
      > 
       {genreUrlPair.genre} 
      </div> 
     ) 
     })} 
     </div> 
    ); 
    } 
} 

Q1。我想要this在標記點處引用GenreDropdown組件。我做錯了什麼？ Q2。你會做一個GenreItem組件嗎？

Answer 1

Array.prototype.map需要被用作this作爲第一個參數傳遞的函數內的第二個可選參數的上下文。通過this，這是指在map被調用時的GenreDropdown實例：

render() { 
    return (
    <div className="genre-dropdown"> 
     {this.props.genres.map(function (genreUrlPair, idx) { 
     return (
      <div 
      className="genre-item" 
      onClick={this.onGenreSelected} 
      > 
      {genreUrlPair.genre} 
      </div> 
     ) 
     }, this)} 
    </div> 
); 
} 

Answer 2

你的函數創建了它自己的上下文。

通過使用function（）{}，這將創建它自己的綁定。所以，你既可以使用箭頭功能

{this.props.genres.map((genreUrlPair, idx) => { 
     return (
     <div 
      className="genre-item" 
      onClick={this.onGenreSelected} <== this is undefined!! 
     > 
      {genreUrlPair.genre} 
     </div> 
    ) 
    })} 

或結合自己

{this.props.genres.map(function (genreUrlPair, idx) { 
     return (
     <div 
      className="genre-item" 
      onClick={this.onGenreSelected} <== this is undefined!! 
     > 
      {genreUrlPair.genre} 
     </div> 
    ) 
    }.bind(this))}