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

Question

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

NumberBox 有 val 个状态。

NumberLink 有 val 属性.

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

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

你能告诉我我做错了什么吗？这是代码：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)

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

使用 strict mode 会将此类情况转化为运行时错误，因此更容易发现。

您也可以使用 ES6 arrow functions (which preserve the current value of this automatically) by enabling the React JSX transformer's harmony mode, or using Babel 作为您的转译器：

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/

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

How to change parent state from child component?

javascript

this

reactjs