Enhancement: Convenience onX method binding pattern for Link.Component classes

[richard-engineering]

Some React components have onHide/onChange/other functions which store the functions to the DOM (beyond our control, library components). Thus if we pass it something like:

class SomeComponent extends React.Component {
  render() {
    const { someLink } = this.props;
    return <Modal onHide={someLink.action((value, event) => !value)} />
  }
}

the function bound to the onHide can get out of sync with the state (it saved a reference to the old Link object to the DOM on first creation instead of re-rendering it).

The workaround for this is to do something like

class SomeComponent extends React.Component {
  boundFunction() {
    const { someLink } = this.props;
    someLink.set(false); // Some Value
  }

  render() {
    return <Modal onHide={this.boundFunction} />
  }
}

It would be nice to have a convenience function on LinkedComponent which can "generate this boundFunction for you". Maybe the usage interface would be something like:

class SomeComponent extends LinkedComponent {
  //Implicitly from LinkedComponent
  bindLink(somePropString, callback) {
    const propLink = this.props[somePropString];
    //Or some other way to make it more generalized?
    link.update(callback);
  }

  render() {
    const { someLink } = this.props;
    return <Modal onHide={this.bindLink(somePropString, () => {})} />
  }
}

[gaperton]

May I propose the alternative solution? I think it's good enough and LinkedComponent support would add no value compared to this:

class SomeComponent extends LinkedComponent {
   updateLink = () => this.props.myLink.set( {} );

  render() {
    const { someLink } = this.props;
    return <Modal onHide={ this.updateLink} />
  }
}