Ref: Callback Refs

Callback Refs

class CustomTextInput extends React.Component {
  constructor(props) {

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;

    this.focusTextInput = () => {
      // Focus the text input using the raw DOM API
      if (this.textInput) this.textInput.focus();

  componentDidMount() {
    // autofocus the input on mount

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in an instance field (for example, this.textInput).
    return (
          value="Focus the text input"

Callback refs is a way to set refs, which gives more fine-grain control over when refs are set and unset.

Instead of passing a ref attribute created by createRef(), you pass a function. The function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.

Related concepts

Ref: Callback Refs — Structure map

Clickable & Draggable!

Ref: Callback Refs — Related pages: