Comme on l'a vu depuis le début de cette formation React offre une couche d'abstraction qui permet de ne plus se soucier du DOM. Cependant on a parfois besoin d’interagir avec le DOM et on a besoin d'une mécanique pour récupérer un élément dans le DOM. Le système de refs va permettre de récupérer un élément (DOM) dans notre composant.
class Home extends React.Component {
constructor (props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.input = React.createRef()
}
handleClick (e) {
console.log('Le formulaire contient la valeur : ' + this.input.current.value)
}
render () {
console.log(this.input)
return <div>
<input type="text" ref={this.input}/>
<button onClick={this.handleClick}>Tester</button>
</div>
}
}L'objet créé par React.createRef() est un simple objet qui contiendra une propriété current qui accueillera l'élément (DOM) lorsque le composant est monté dans le DOM.
Il est aussi possible de faire passer la référence dans un composant à l'aide de la fonction React.forwardRef().
const Field = React.forwardRef(function (props, ref) {
return <div className="form-group">
<input type="text" className="form-control" ref={ref}/>
</div>
})De cette manière, si le composant reçois une propriété ref, il la fera passé au champs texte.
