31.reaching-into-a-component.md

Reaching Into A Component

Accessing a component from the parent. eg. Autofocus an input (controlled by parent component)

Child Component

An input component with a focus() method that focuses the HTML element

class Input extends Component {
  focus() {
    this.el.focus();
  }

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

Parent Component

In the parent component, we can get a reference to the Input component and call its focus() method.

class SignInModal extends Component {
  componentDidMount() {
    // Note that when you use ref on a component, it’s a reference to
    // the component (not the underlying element), so you have access to its methods.
    this.InputComponent.focus();
  }

  render() {
    return (
      <div>
        <label>User name:</label>
        <Input
          ref={comp => { this.InputComponent = comp; }}
        />
      </div>
    )
  }
}

Reference:

• https://hackernoon.com/10-react-mini-patterns-c1da92f068c5