Introduction to the React Ref System

class MyComponent extends Component {
  render() {
    return (
      <div>
        <input ref={input => this.myInput = input} />
      </div>
    );
  }
}

class MyComponent extends Component {
  alertInput() {
    const value = this.myInput.value;
    // Please don't use alert in actual applications.
    alert(value);
  }

  render() {
    return (
      <div>
        <input ref={input => this.myInput = input} />
        <button onClick={this.alertInput.bind(this)}>Alert</button>
      </div>
    );
  }
}

class MyComponent extends Component {
  // As soon as the component mounts, `myInput` will be focused.
  componentDidMount() {
    this.myInput.focus();
  }

  render() {
    return (
      <div>
        <input ref={input => this.myInput = input} />
      </div>
    );
  }
}

class MyComponent extends Component {
  // The canvas is drawn when the component is mounted.
  componentDidMount() {
    this.drawCanvas();
  }

  // The canvas is drawn when the component updates.
  componentDidUpdate() {
    this.drawCanvas();
  }

  drawCanvas() {
    const context = this.myCanvas.getContext('2d');
    context.clearRect(0, 0, 500, 500);
    context.fillText('If you can read this, your eyes are better than mine.', 250, 250);
  }

  render() {
    return (
      <div>
        <canvas ref={canvas => this.myCanvas = canvas} height={500} width={500} />
      </div>
    );
  }
}