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()
methodThis 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.