use ref code example
Example 1: useRef
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
Example 2: useref in functional component
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
Example 3: react useref in useeffect
import React, { useEffect, useRef } from 'react';
const fooComponent = props => {
const inputBtnRef = useRef(null);
useEffect(() => {
inputBtnRef.current.focus();
});
return (
<div>
<input
type="text"
ref={inputBtnRef}
/>
</div>
);
}
Example 4: a ref
<a href="https://www.w3schools.com">Visit W3Schools</a>
Example 5: when to use react ref
WHEN TO USE REACT'S REF ATTRIBUTE?
But it is not always a good idea to use the ref attribute. The general rule of thumb is to avoid it. The official React documentation mentions three occasions where you can use it because you have no other choice.
Managing focus, text selection, or media playback.
Integrating with third-party DOM libraries.
Triggering imperative animations.
Example 6: refs react js
class Lesson9Refs extends Component {
onAddProduct = () => {
alert(this.refs.productname.value);
}
return (
<div>
<div className="container">
<div class="card mt-10">
<div class="card-header">
Featured
</div>
<div class="card-body">
<label> Product Name: </label>
<input type='text' className="form-control" ref="productname" />
<button type="submit" className="btn btn-primary" onClick={ this.onAddProduct } >
Add Product
</button>
</div>
</div>
<div className="row mt-10">
{ elements }
</div>
</div>
</div>
);
}
}
export default Lesson9Refs;