what is a ref in react code example
Example 1: 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 2: 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 3: cre&atRefs react js
const node = this.myRef.current;
Example 4: use ref in component reactjs
function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} /> </div>
);
}
class Parent extends React.Component {
render() {
return (
<CustomTextInput
inputRef={el => this.inputElement = el} />
);
}
}
Example 5: use ref in component reactjs
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// Crée une référence pour stocker l’élément DOM textInput
this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// Donne explicitement le focus au champ texte en utilisant l’API DOM native.
// Remarque : nous utilisons `current` pour cibler le nœud DOM
this.textInput.current.focus(); }
render() {
// Dit à React qu’on veut associer la ref `textInput` créée
// dans le constructeur avec le `<input>`.
return (
<div>
<input
type="text"
ref={this.textInput} /> <input
type="button"
value="Donner le focus au champ texte"
onClick={this.focusTextInput}
/>
</div>
);
}
}