在地圖功能中反應 onClick 功能

Question

我嘗試在地圖函數中觸發 onClick 事件，但出現此錯誤：

TypeError：無法讀取未定義的屬性“handleClick”

我們如何在地圖函數中觸發 onClick 事件？

這是我的代碼：

class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggleOn: true,
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState((prevState) => ({
            isToggleOn: !prevState.isToggleOn,
        }));
    }

    render() {
        if (this.props.data) {
            var recipes = this.props.data.map(function (recipe, i) {
                return (
                    <div
                        key={i}
                        className="col-8 offset-col-1 f-l relative m-t-10"
                    >
                        <div className="col-6 f-l">
                            <p className="col-8 f-l">{recipe.title}</p>
                            <button className="f-l" onClick={this.handleClick}>
                                Voir la recette
                            </button>
                        </div>
                    </div>
                );
            });
        }
        return (
            <div className="RecipeList">
                <div className="col-12">
                    {recipes}
                    <div className="both"></div>
                </div>
            </div>
        );
    }
}

Answer 1

使用箭頭函數作為給map的函數， this將是您所期望的：

if (this.props.data) {
  var recipes = this.props.data.map((recipe, i) => {
    return <div key={i} className="col-8 offset-col-1 f-l relative m-t-10">
      <div className="col-6 f-l">
        <p className="col-8 f-l">{recipe.title}</p>
        <button className="f-l" onClick={this.handleClick}>Voir la recette</button>
      </div>
    </div>;
  });
}

為什么會這樣， 這里會詳細解釋。 箭頭函數不提供自己的this綁定，而是保留封閉詞法上下文的this值。

Answer 2

這就是我處理類似情況的方法。

import React from "react";
import ReactDOM from "react-dom";

const stuff = ["one", "two", "three"];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(val) {
    console.log(val);
  }

  getStuff() {
    var elements = stuff.map((value, key) => {
      return (
        <li key={key} onClick={() => this.handleClick(value)}>
          {value}
        </li>
      );
    });

    return elements;
  }
  render() {
    return <ul>{this.getStuff()}</ul>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

這是沙箱-> https://codesandbox.io/embed/1rqw081oj7

Answer 3

您必須在地圖參數或箭頭函數中使用this 。

 this.props.data.map(function(recipe, i) {
            return  <div key={i} className="col-8 offset-col-1 f-l relative m-t-10">
                        <div className="col-6 f-l">
                            <p className="col-8 f-l">{recipe.title}</p>
                            <button className="f-l" onClick={this.handleClick}>Voir la recette</button>
                        </div>
                    </div>;
        }, this)

為什么？

在這里閱讀。

如果為 map 提供了thisArg參數，它將被用作回調的this值。 否則，值 undefined 將用作其 this 值。

為了更好地理解this范圍檢查here 。 解釋this在不同上下文中的內容，如簡單函數調用、對象方法、箭頭函數等。還解釋了如何通過bind 、 call和apply來控制范圍。