Updating Thinking in React doc to replace refs with event handlers

[rohannair]

Fixes #8209 (comment)

[gaearon]

One problem with this is sending props “up” can potentially swallow some updates. This is not the case in this particular example but I’d like to avoid this pattern if possible. In React, this.props are the “currently rendered” props but they may not be up to date if there was a scheduled update that has not yet been flushed.

Can you also try creating another version with two separate callbacks so that we could compare them?

[rohannair]

Will do shortly.

[rohannair]

@gaearon the second version is here: http://codepen.io/rohan10/pen/xgRLqJ

IMHO, while it's a lot more verbose, I think it does get the concept across in a more digestible manner.

[gaearon]

Yea, I like it better. Let's use it?

[rohannair]

@gaearon the CodePen has been updated, and I also adjusted the copy slightly to reflect that there are multiple callbacks passed in.

[gaearon]

    this.props.onInStockInput(
      e.target.value
    );

You probably want e.target.checked here. I can't uncheck it.

Also maybe it's not worth using newlines here:

    this.props.onInStockInput(e.target.checked);

[gaearon]

Need to fix the checkbox.

[rohannair]

Fixed.

[gaearon]

Thank you!

[gaearon]

Oops: #8996