ReactComponentBeforeAndAfter.ts - Revised

ReactComponentBeforeAndAfter-Revised.ts

// The 'After' revised:
import * as React from "react";

// The T in React.Props<T> is used for the function style access of `ref`
// for use by the caller. Example (defines `component` parameter of callback):
//     <Button ref={ component => this._button = component }/>
interface ButtonProps extends React.Props<Button> {
  icon : string;
  caption : string;
  handler : ()=>boolean;
  onCloseRequest? : ()=>void;
}

class Button extends React.Component<ButtonProps,{}> {
  render() {
    let className = `fa ${ this.props.icon }`;
    return (
      <button type="button" className="btn btn-primary" onClick={this.handleClick}>
        <span className={className} /> {this.props.caption}
      </button>
    );
  }

  // Using this syntax, `this` is pre-bound. Bonus, if you want the event
  // object, you'd use `React.MouseEvent` (instead of `MouseEvent`).
  private handleClick = (e:React.MouseEvent) => {
    let shouldClose = this.props.handler();
    if (shouldClose)
    {
      this.props.onCloseRequest();
    }
  }
}