Refs in React: Your Shortcut to DOM Control

In React, ref is a way to access and interact with the DOM elements or components that are rendered by React. It allows you to get a reference to a DOM element or a React component instance, which can be useful in various scenarios like handling user input, focusing on input fields, triggering animations, etc.

There are two ways to create a ref in React:

Using React.createRef() method

This method creates an empty ref object that can be attached to a React element using the ref attribute.

 class MyComponent extends React.Component {
   constructor(props) {
     super(props);
     this.myRef = React.createRef();
   }

   render() {
     return <div ref={this.myRef}>Hello, World!</div>;
   }
 }

Using a callback function

This method allows you to get a reference to the underlying DOM node or component instance directly.

 class MyComponent extends React.Component {
   constructor(props) {
     super(props);
     this.myRef = null;
     this.setMyRef = element => {
       this.myRef = element;
     };
   }

   render() {
     return <div ref={this.setMyRef}>Hello, World!</div>;
   }
 }

Once you have created a ref, you can access the DOM node or component instance using the current property of the ref object.

 const node = this.myRef.current; // access the DOM node
 const componentInstance = this.myRef.current; // access the component instance

PermalinkReferencing values with refs

In React, you can use refs to reference values of input fields or other DOM elements. Once you have a reference to the DOM node through the ref attribute, you can use its value property to access the current value of the input field.

For example, consider a form with an input field for a user's name. You can use a ref to reference the value of this input field when the form is submitted:

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.nameInput = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const name = this.nameInput.current.value;
    console.log(`Hello, ${name}!`);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.nameInput} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

In this example, the handleSubmit method is called when the user submits the form. This method accesses the value of the input field through the this.nameInput.current.value property and logs a message to the console using the value.

You can also use refs to reference the values of other types of DOM elements, such as checkboxes or radio buttons. For example:

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.checkboxInput = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const isChecked = this.checkboxInput.current.checked;
    console.log(`The checkbox is ${isChecked ? 'checked' : 'unchecked'}.`);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="checkbox" ref={this.checkboxInput} />
          Check me!
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

In this example, the handleSubmit method accesses the checked state of the checkbox input through this.checkboxInput.current.checked property and logs a message to the console based on the checked state.

PermalinkManipulating Dom with refs

You can use refs in React to manipulate the DOM by accessing the underlying DOM nodes of the React components. Once you have a reference to the DOM node through the ref attribute, you can use standard DOM methods and properties to manipulate it.

For example, you can use refs to focus on an input field when a user clicks a button:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleClick = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleClick}>Focus Input</button>
      </div>
    );
  }
}

In this example, the handleClick method is called when the user clicks the "Focus Input" button. This method accesses the input field DOM node through the this.inputRef.current property and calls the focus() method to give it focus.

You can also use refs to trigger animations on DOM nodes. For example, you can use the classList property to add or remove CSS classes on an element:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.boxRef = React.createRef();
  }

  handleClick = () => {
    this.boxRef.current.classList.add('animated');
  }

  render() {
    return (
      <div>
        <div ref={this.boxRef}>Hello, World!</div>
        <button onClick={this.handleClick}>Animate Box</button>
      </div>
    );
  }
}

In this example, the handleClick method adds the animated CSS class to the div element referenced by the this.boxRef ref object, triggering a CSS animation.