YouTipReact Refs
React supports a very special attribute called **Ref**, which you can use to bind to any component returned by the `render()` output.
This special attribute allows you to reference the corresponding backing instance returned by `render()`, ensuring that you always get the correct instance at any time.
In React, Refs (references) provide a way to access DOM elements or component instances. Using Refs allows you to directly manipulate DOM elements or obtain child component instances, which is useful for handling focus, text selection, media playback, triggering forced animations, or integrating third-party DOM libraries.
### Usage
Use `React.createRef` or `useRef` to create and access refs.
`React.createRef` is typically used in class components, while `useRef` is a Hook typically used in function components.
Additionally, binding `this` in event handlers can also be avoided by using class property syntax to prevent creating a new function on every render.
* **Creating a Ref**: In the constructor of a class component, use `React.createRef` to create a ref object and assign it to a property of the component instance.
* **Binding the Ref**: In the `render` method, bind the ref object to the DOM element that needs to be referenced.
* **Accessing the Ref**: In other methods of the component, access the bound DOM element via `this.myInputRef.current` to manipulate its properties and methods.
### Complete Example
You can access the current React component using `this`, or obtain a reference to the component using `ref`. Here is an example:
## React Example
class MyComponent extends React.Component{constructor(props){super(props); this.myInputRef = React.createRef(); }handleClick = () =>{this.myInputRef.current.focus(); }render(){return(); }}
[Try it »](#)
In this example, we obtained a reference to the backing instance of the input box. After clicking the button, the input box gains focus.
We can also use the `getDOMNode()` method to get the DOM element.
* * *
### Creating Refs
React provides the `React.createRef` method to create refs.
## Example
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.Component{
constructor(props){
super(props);
this.myRef= React.createRef();
}
componentDidMount(){
this.myRef.current.focus();
}
render(){
return;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Callback Refs
Another way to create refs is by using a callback function. This approach was common before React 16.3, but now `React.createRef` is recommended.
## Example
class MyComponent extends React.Component{
constructor(props){
super(props);
this.setMyRef= element =>{
this.myRef= element;
};
}
componentDidMount(){
if(this.myRef){
this.myRef.focus();
}
}
render(){
return;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Using Refs to Access DOM Elements
Through Refs, you can directly access and manipulate DOM elements.
## Example
class MyComponent extends React.Component{
constructor(props){
super(props);
this.myRef= React.createRef();
}
handleClick =()=>{
this.myRef.current.style.backgroundColor='yellow';
};
render(){
return(
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Using Refs to Access Child Component Instances
Refs can also be used to access instance methods or properties of child components.
## Example
class ChildComponent extends React.Component{
focusInput =()=>{
this.inputRef.current.focus();
};
constructor(props){
super(props);
this.inputRef= React.createRef();
}
render(){
return;
}
}
class ParentComponent extends React.Component{
constructor(props){
super(props);
this.childRef= React.createRef();
}
handleClick =()=>{
this.childRef.current.focusInput();
};
render(){
return(
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Using the useRef Hook (Function Components)
In function components, you can use the `useRef` Hook to create refs.
## Example
import React,{ useRef } from 'react';
import ReactDOM from 'react-dom';
const MyComponent =()=>{
const inputRef = useRef(null);
const handleClick =()=>{
inputRef.current.focus();
};
return(
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
// Render the MyComponent component
root.render();
### Summary
* **Creating Refs**: Use `React.createRef` in class components and the `useRef` Hook in function components.
* **Accessing DOM Elements**: Directly access and manipulate DOM elements via refs.
* **Accessing Child Component Instances**: Access instance methods or properties of child components via refs.
* **Customizing Exposed Instance Values**: Use `useImperativeHandle` and `forwardRef` to customize the instance values exposed by a child component to its parent.
* **Refs in Concurrent Mode**: Refs continue to work normally in concurrent mode and can be used in conjunction with concurrent mode-related Hooks like `useTransition`.