Découverte
Notions avancées
Les hooks
Notions avancées
TP
TP Recettes: AuthentificationRéservé aux membres premiums
30 min
TP Recettes: Récupération des ingrédientsRéservé aux membres premiums
38 min
TP Recettes: Gestion des ingrédientsRéservé aux membres premiums
29 min
TP Recettes: Gestion des recettesRéservé aux membres premiums
39 min
TP Recettes: Création d'une recetteRéservé aux membres premiums
47 min
TP Recettes: Edition d'une recetteRéservé aux membres premiums
25 min
Conclusion
Conclusion
04 min

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.