Question

我尝试在地图函数中触发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>
    );
}
}

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

here详细解释了为什么会这样。 Arrow函数不提供自己的this绑定，而是保留封闭词法上下文的this值。

Answer 2

您必须在地图参数或箭头函数中使用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)

为什么？

阅读here。

如果提供了thisArg参数来映射，它将用作回调的this值。否则，将使用值undefined 作为其此值。

要更好地理解this范围检查here。解释this中不同上下文中的内容，例如简单函数调用，对象方法，箭头函数等。还说明如何借助bind，call和{{ 1}}。

Answer 3

这就是我应对类似情况的方式。

[GC pause (G1 Evacuation Pause) (young)
Desired survivor size 524288 bytes, new threshold 0 (max 0)
, 25.0957244 secs]
     [Parallel Time: 1087.3 ms, GC Workers: 4]
   [GC Worker Start (ms): Min: 5050906.2, Avg: 5050906.4, Max: 5050906.5, Diff: 0.2]
   [Ext Root Scanning (ms): Min: 1.0, Avg: 190.7, Max: 415.2, Diff: 414.2, Sum: 762.8]
   [Update RS (ms): Min: 308.9, Avg: 565.0, Max: 650.3, Diff: 341.4, Sum: 2259.8]
      [Processed Buffers: Min: 56, Avg: 69.2, Max: 82, Diff: 26, Sum: 277]
   [Scan RS (ms): Min: 0.0, Avg: 0.0, Max: 0.0, Diff: 0.0, Sum: 0.1]
   [Code Root Scanning (ms): Min: 0.0, Avg: 0.0, Max: 0.0, Diff: 0.0, Sum: 0.0]
   [Object Copy (ms): Min: 0.8, Avg: 310.7, Max: 414.8, Diff: 414.0, Sum: 1242.9]
   [Termination (ms): Min: 0.0, Avg: 15.6, Max: 20.8, Diff: 20.8, Sum: 62.4]
      [Termination Attempts: Min: 1, Avg: 1.0, Max: 1, Diff: 0, Sum: 4]
   [GC Worker Other (ms): Min: 0.0, Avg: 0.0, Max: 0.0, Diff: 0.0, Sum: 0.1]
   [GC Worker Total (ms): Min: 1066.9, Avg: 1082.0, Max: 1087.2, Diff: 20.3, Sum: 4328.2]
   [GC Worker End (ms): Min: 5051973.4, Avg: 5051988.4, Max: 5051993.4, Diff: 20.0]
[Code Root Fixup: 0.2 ms]
[Code Root Purge: 0.0 ms]
[String Dedup Fixup: 2.0 ms, GC Workers: 4]
   [Queue Fixup (ms): Min: 0.0, Avg: 0.0, Max: 0.0, Diff: 0.0, Sum: 0.0]
   [Table Fixup (ms): Min: 0.1, Avg: 0.9, Max: 1.9, Diff: 1.8, Sum: 3.7]
[Clear CT: 82.6 ms]
[Other: 23923.6 ms]
   [Choose CSet: 0.0 ms]
   [Ref Proc: 415.2 ms]
   [Ref Enq: 0.0 ms]
   [Redirty Cards: 0.1 ms]
   [Humongous Register: 0.1 ms]
   [Humongous Reclaim: 0.1 ms]
   [Free CSet: 0.2 ms]
[Eden: 119.0M(119.0M)->0.0B(133.0M) Survivors: 0.0B->0.0B Heap: 572.3M(2391.0M)->456.2M(2666.0M)]
[Times: user=0.00 sys=1.29, real=27.79 secs]

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

在地图功能中反应onClick功能

3 个答案: