ReactJS Tutorial - 29 - Refs with Class Components

Summary

In this video, the presenter demonstrates how to use refs in React, focusing on both DOM elements and class components. The process begins with creating a ref using `React.createRef()` in a class component's constructor. The ref is then attached to an input element, and a method (`focusInput`) is defined to focus the input when called. The parent component uses a ref to access the child component and trigger its method. The video concludes by explaining that refs can only be used with class components, not functional ones, and shows how this technique enables parent-child interaction in React.

Takeaways

• 😀 Refs in React can be attached to both DOM elements and class components.
• 😀 Functional components cannot directly receive refs unless using forwardRef.
• 😀 To create a ref, use `React.createRef()` in the constructor of a class component.
• 😀 Attach the ref to an element or component using the `ref` attribute.
• 😀 Child class components can expose methods that can be called by parent components via refs.
• 😀 Example: a `focusInput` method in a child component can focus an input element when called.
• 😀 In the parent component, create a ref for the child component and attach it to the child element.
• 😀 The parent can invoke child methods using `this.childRef.current.methodName()`.
• 😀 Adding a click handler in the parent allows triggering the child method, such as focusing an input.
• 😀 This approach is useful for special circumstances where a parent needs direct control over a child component.

Q & A

What is the purpose of using refs in React?

Refs in React are used to directly interact with DOM elements or class components, providing a way to access and modify them outside the regular React data flow. In the video, refs are used to focus on an input element within a class component.

Can refs be attached to functional components in React?

No, refs cannot be attached to functional components. They are only supported in class components, as shown in the video where refs are used with an input element inside a class component.

How do you create a ref in a React class component?

To create a ref in a class component, use the `React.createRef()` method, typically in the constructor. For example: `this.inputRef = React.createRef();`

What does the `componentDidMount` lifecycle method do in React?

The `componentDidMount` method is a lifecycle hook that runs after the component is initially rendered. In this video, the `componentDidMount` method is mentioned as a place where you could focus on the input element, although it isn't used in this particular example.

How can a parent component interact with a method in a child component using refs?

In the video, the parent component creates a ref to the child component and attaches it to the child component using the `ref` attribute. Then, the parent can call a method defined in the child component (e.g., `focusInput`) via the ref, enabling interaction between the two components.

What is the purpose of the `focusInput` method in the child component?

The `focusInput` method is used to focus the input element in the child component when called from the parent. It is invoked through the parent’s ref to the child component.

How do you attach a ref to a child component in React?

To attach a ref to a child component, first create the ref in the parent component using `React.createRef()`. Then, pass the ref to the child component by setting the `ref` attribute to the created ref in the JSX of the parent.

What is the structure of the button click handler in the parent component?

The button click handler in the parent component is defined as an arrow function, which calls the `focusInput` method of the child component through the ref. The handler looks like this: `onClick = () => { this.componentRef.current.focusInput(); };`

What is the role of the `current` property in React refs?

The `current` property of a ref provides access to the actual DOM element or class component instance. For instance, `this.inputRef.current.focus()` accesses the DOM element referenced by `inputRef` and calls its `focus()` method.

Can you use refs with DOM elements in React?

Yes, refs can be used with DOM elements like `<input>`, `<div>`, etc., to directly manipulate them. In the example, a ref is attached to an input element to focus it programmatically.