javascript - 如何从子组件更改父状态？

我正在学习react.js并尝试执行以下操作：
我有带有NumberLink子组件的NumberBox组件。

NumberBox具有val状态。

NumberLink具有val属性。

当我单击NumberLink时，我想将NumberBox状态更改为链接的val属性，但是在控制台中，我得到：


  未捕获的TypeError：this.props.onNumberLinkClick不是函数。


你能告诉我我做错了吗？
这是代码：https://jsfiddle.net/ym58zcv4/1/

最佳答案

您正在通过undefined作为onNumberLinkClick道具。

执行回调时，使用Array.prototype.map()的第二个参数提供this值：

var numberLinks = this.props.data.map(function (number) {
  return (
    <NumberLink val={number} key={number} onNumberLinkClick={this.handleNumberLinkClick}/>
  );
}, this)

工作提琴：https://jsfiddle.net/ym58zcv4/3/



使用strict mode会将类似情况变成运行时错误，因此更容易发现。

您还可以通过启用React JSX转换器的this模式或使用ES6 arrow functions作为编译器来使用Babel（自动保留harmony的当前值）：

var numberLinks = this.props.data.map(number =>
  <NumberLink val={number} key={number} onNumberLinkClick={this.handleNumberLinkClick}/>
)