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

你的功能创造了它自己的背景。

通过使用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))}

Answer 2

Array.prototype.map接受一个可选的第二个参数，该参数在作为第一个参数传递的函数内用作this。通过this，即GenreDropdown时引用的map个实例：

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

“this”在组件的渲染功能中

2 个答案: