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

Question

I'm learning react.js and try to do something like this: I have NumberBox component with NumberLink child components.

NumberBox has val state.

NumberLink has val property.

When I click NumberLink I'd like to change NumberBox state to link's val property, but in console I get:

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

Can you tell me what I am doing wrong? Here is the code: https://jsfiddle.net/ym58zcv4/1/

Answer 1

You're passing undefined for the onNumberLinkClick prop.

Use the second argument to Array.prototype.map() to provide the this value when the callback is executed:

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

Working fiddle: https://jsfiddle.net/ym58zcv4/3/

---

Using strict mode will turn cases like this into runtime errors so they're easier to catch.

You could also use ES6 arrow functions (which preserve the current value of this automatically) by enabling the React JSX transformer's harmony mode, or using Babel as your transpiler:

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

Answer 2

You were also setting the state round the wrong way in your handleNumberLinkClick function

this.setState({val:number}) should be this.setState({number:val})

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