时间戳

首页 > 解决方案 > 在地图功能中反应 onClick 功能

javascript - 在地图功能中反应 onClick 功能

问题描述

我尝试在地图函数中触发 onClick 事件，但出现此错误：

TypeError：无法读取未定义的属性“handleClick”

我们如何在地图函数中触发 onClick 事件？

这是我的代码：

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

标签： javascriptreactjs

解决方案

使用箭头函数作为给定的函数，这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封闭词法上下文的值。

推荐阅读