Quick React component (in TypeScript) to open a file/read as text/return contents via callback

OpenFileButton.tsx

import * as React from "react";

type OpenFileButtonProps = {
  label: string;
  onOpen: (file: string) => void;
};

export default class OpenFileButton extends React.Component<
  OpenFileButtonProps
> {
  private input: any;

  render() {
    return (
      <a onClick={this.onClick} className="little-button">
        {this.props.label}
        <input
          type="file"
          id="file"
          accept=".json"
          ref={comp => (this.input = comp)}
          style={{ display: "none" }}
          onChange={this.fileChanged}
        />
      </a>
    );
  }

  private onClick = () => {
    this.input.click();
  };

  private fileChanged = (evt: any) => {
    const file = this.input.files[0];
    if (!file) {
      console.error("no file");
      return;
    }

    const fr = new FileReader();

    fr.onload = e => {
      if (e && e.target) {
        const content = e.target.result;

        if (content) {
          this.props.onOpen(content);
        } else {
          console.error("Unable to read content");
        }
      } else {
        console.error(
          "No event/target supplied for onload callback to readAsText"
        );
      }
    };
    fr.readAsText(file);
  };
}