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

Question

我正在学习 react.js 并尝试做这样的事情: 我有带有 NumberLink 子组件的 NumberBox 组件。

NumberBox 有 val 状态。

NumberLink 具有 val 属性。

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

Uncaught TypeError: this.props.onNumberLinkClick is not a function.

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

Answer 1

您正在为 onNumberLinkClick 属性传递 undefined。

将第二个参数用于Array.prototype.map()在执行回调时提供 this 值:

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

工作 fiddle :https://jsfiddle.net/ym58zcv4/3/

---

使用 strict mode会将此类情况转化为运行时错误，以便更容易捕获。

你也可以使用 ES6 arrow functions (自动保留 this 的当前值)通过启用 React JSX 转换器的 harmony 模式，或使用 Babel作为你的转译器:

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