YouTipReact Refs
React supports a very special attribute **Ref**, which you can use to bind to any component output by render().
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 provide a way to access DOM elements or component instances. Using Refs allows you to directly manipulate DOM elements or get child component instances, which is suitable for scenarios like handling focus, text selection, media playback, triggering imperative 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 avoid creating a new function on every render by using the class properties syntax.
* **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 a Ref**: In the `render` method, bind the ref object to the DOM element that needs to be referenced.
* **Accessing a Ref**: In other methods of the component, access the bound DOM element via `this.myInputRef.current`, allowing you to manipulate the element's properties and methods.
### Complete Example
You can use `this` to get the current React component, or use ref to get a reference to the component. The example is as follows:
## React Example
class MyComponent extends React.Component{constructor(props){super(props); this.myInputRef = React.createRef(); }handleClick = () =>{this.myInputRef.current.focus(); }render(){return(); }}
[Try it Out »](#)
In the example, we get a reference to the backing instance of the input box, and the input box gets focus when the button is clicked.
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 to use a callback function. This approach was very common before React 16.3, but now React.createRef is more 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 component.
* **Refs in Concurrent Mode**: Refs still work normally in concurrent mode and can be used in combination with concurrent mode-related Hooks like `useTransition`.