how to use refs in React code example
Example 1: react.createref()
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
this.textInput.current.focus(); }
render() {
return (
<div>
<input
type="text"
ref={this.textInput} /> <input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}
Example 2: 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 3: 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;
Example 4: react ref
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef(); }
render() {
return <div ref={this.myRef} />; }
}
Example 5: use ref in component reactjs
function MyFunctionComponent() { return <input />;
}
class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef(); }
render() {
return (
<MyFunctionComponent ref={this.textInput} /> );
}
}
Example 6: use ref in component reactjs
function CustomTextInput(props) {
function handleClick() {
textInput.current.focus(); }
return (
<div>
<input
type="text"
ref={textInput} /> <input
type="button"
value="Donner le focus au champ texte"
onClick={handleClick}
/>
</div>
);
}