Question

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

NumberBox有val州。

NumberLink有val属性。

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

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

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

Answer 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会将此类案例转换为运行时错误，以便更容易捕获。

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

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

Answer 2

您还在handleNumberLinkClick函数

中以错误的方式设置状态

this.setState({val:number})应为this.setState({number:val})

https://jsfiddle.net/andykenward/6m3wp3kr/

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

2 个答案: