Summary
Whether in Vue or React, if we want to use the DOM of an element, we don’t need to manipulate the DOM in JS. They provide a dedicated API called ref.
The ref in Vue may be relatively simple. This article mainly talks about how to use ref in React and the scenarios of using ref.
1. Mounting of ref
In React, ref can be mounted on html elements, and can also be mounted on React elements at the same time, see the following code:
import React, {
Component } from 'react'
// import { findDOMNode } from 'react-dom'
import Child from './Child'
export default class Father extends Component {
componentDidMount(){
console.log(this.refs.refElement);
console.log(this.refs.child);
}
render() {
return (
<div>
<input ref={
'refElement' }></input>
<Child ref={
'child' }/>
<button onClick={
this.fn}>123</button>
</div>
)
}
}
The console print is:
As you can see, in React, ref can be mounted on HTML elements and React elements.
(1) Mount the HTML element and return the real DOM
(2) Mount the React element and return the rendered instance object
At the same time, React also provides a method findDOMNode that can turn the ref return of React elements into real DOM elements.
import {
findDOMNode } from 'react-dom'
console.log(findDOMNode(this.refs.child));
At the same time, we can also see from the above code that the mounting of ref is executed before the life cycle such as componentDidMount .
2. Three ways to use ref
(1) String method
import React, {
Component } from 'react'
export default class Father extends Component {
componentDidMount(){
console.log(this.refs.refElement);
}
render() {
return (
<div>
<input ref={
'refElement' }></input>
<button onClick={
this.fn}>123</button>
</div>
)
}
}
This method is similar to Vue's ref, but it is not recommended by the government at present, and may be discarded in the future.
(2) The way of function
import React, {
Component } from 'react'
export default class Father extends Component {
componentDidMount(){
console.log(this.refElement);
}
render() {
return (
<div>
<input ref={
ref => this.refElement = ref }></input>
<button onClick={
this.fn}>123</button>
</div>
)
}
}
(3) The way of react.CreateRef
import React, {
Component } from 'react'
export default class Father extends Component {
refElement = React.createRef();
componentDidMount(){
console.log(this.refElement.current);
}
render() {
return (
<div>
<input ref={
this.refElement}></input>
<button onClick={
this.fn}>123</button>
</div>
)
}
}
Remember to get the real DOM element through current in refElement.
3. The usage scenario of ref
Here we talk about a more common scenario, which is to click the button to focus the input box:
import React, {
Component } from 'react'
export default class Father extends Component {
refElement = React.createRef();
componentDidMount(){
console.log(this.refElement.current);
}
fn = ()=>{
this.refElement.current.focus();
}
render() {
return (
<div>
<input ref={
this.refElement}></input>
<button onClick={
this.fn}>聚焦</button>
</div>
)
}
}
After obtaining the DOM, call the focus method API on the DOM to focus the input box.
At the same time, ref can also be applied to the animation effects of some DOM elements, such as moving, changing in size, all need to control DOM through ref to operate.