IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

React: modification du DOM


Sujet :

React

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2020
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2020
    Messages : 10
    Points : 16
    Points
    16
    Par défaut React: modification du DOM
    Bonsoir. je suis sur une fonctionnalité d'un site que je veux créer (j'en suis encore au maquette mais ça avance) avec REACT ET PHP/MYSQL et là je bloque sur un truc.
    Je récupère des données via un appel ajax (XMLHttpRequest) dépuis une base de données mysql (une base de test bien-sur) et tout ce se passe bien
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    import React, { Component } from "react";
     
    class Requete extends Component {
     
        constructor (props) {
            super(props)
            this.handleClick = this.handleClick.bind(this)
            this.val = React.createRef()
        }
     
        componentDidMount () {
     
            const req = new XMLHttpRequest()
     
            req.open('GET', 'http://localhost/tests/test-post.php')
     
            req.onload = function () {
                const result = JSON.parse(req.responseText)
                const messages = result.map(function(message) {
                    return `
                            <div className="message">
                                <span>${message.date_modif.substring(11, 16)}</span>
                                <span>${message.pseudo}</span>
                                <span>${message.messag}</span>
                            </>
                    `
                }).join('')
                document.querySelector('#messages').innerHTML = messages
                // this.val.current.value = messages
            }
            req.send()
        }
     
        handleClick () {
            this.val.current.value = 'test'
            console.log(this.val.current.value)
        }
     
        render () {
            return (
                <div id='messages' ref={this.val}>
                    <button onClick={this.handleClick}>Tester</button>
                </div>
            )
        }
     
    }
    export default Requete
    Le problème est que je manipule directement le DOM dans ma fonction componentDidMount parce-que je n'arrive à utiliser la variable messages hors de la fonction dans laquelle je traite les données récupérés ce qui m'oblige à faire un querySelector et modifier les DOM sans passé par REACT. j'ai vu un tuto qui parlais des ref et j'ai essayer d'utiliser cette notion (la partie de code commenté et la fonction de test handleClick en sont la preuve) mais toujours rien. Bon bien-sur mon code il marche bien (je sais in touche pas à un code qui marche) j'aimerais vraiment pouvoir récupérer cette variable messages pour pouvoir l'integrer directement dans ma fonction render.
    Merci d'avance pour votre aide

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    900
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 900
    Points : 1 289
    Points
    1 289
    Par défaut
    hello,
    il faut utiliser le state de ton composant pour que le composant se mette à jour graphiquement. En passant par le state, react détectera des changements est fera un refresh.
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2020
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2020
    Messages : 10
    Points : 16
    Points
    16
    Par défaut
    J'ai déjà essayé avec le State et modifier avec la fonction setState mais le problème viens (je pense) du fais que ma variable messages est déclaré dans une fonction à l'intérieur d'une fonction (un peu comme un callback) et de fais ne peux être exploité en dehors. Lorsque j'utilise le State si je l'appelle dans la fonction du onload REACT me dit que setState n'est pas défini même avec le bind(this).
    Si t'a d'autres propositions je suis preneur

  4. #4
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    900
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 900
    Points : 1 289
    Points
    1 289
    Par défaut
    il faut que tu bind ta fonction onload à ton composant
    ou alors tu passes par une arrow function :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    // le scope de ton composant
    req.onload = () => {
    // en utilisant une arrow, tu restes dans le même scope :
    //celui du composant, tu à accès à this.setState
    }
    je te recommandé quand même de t'intéresser aux "hooks", les apis que propose react sont certes un peu plus compliquées à appréhender, mais parmi bien d'autres avantages, elles éliminent ces problèmes de scope
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  5. #5
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2020
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2020
    Messages : 10
    Points : 16
    Points
    16
    Par défaut
    Thanks dude. J'ai utilisé un Arrow et ça passe
    Par contre le rendu c'est du HTML mais ça affiche une string contenant ce HTML sans que le navigateur puisse le lire. T'aurais une idée de comment je pourrais régler ça ?

  6. #6
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    900
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 900
    Points : 1 289
    Points
    1 289
    Par défaut
    Citation Envoyé par chrisyk22 Voir le message
    T'aurais une idée de comment je pourrais régler ça ?
    Sans voir ton code actuel, non. Je suppose que tu fais toujours un map sur des données qui te renvoie une string. Ou bien c'est ce que tu lis dans mysql qui contient du html ?
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

Discussions similaires

  1. [Protype Framework] Observe après modif du DOM
    Par PtitGénie dans le forum Développement Web en Java
    Réponses: 0
    Dernier message: 08/12/2011, 17h27
  2. Détecter les modifications du DOM dans une div
    Par Invité dans le forum jQuery
    Réponses: 3
    Dernier message: 01/12/2011, 17h14
  3. [DOM] Surveiller une modification du DOM (lib prototype)
    Par Cladjidane dans le forum Bibliothèques & Frameworks
    Réponses: 9
    Dernier message: 04/02/2008, 14h58
  4. [DOM] Modification du DOM non visible lors d'un setInterval
    Par Mr N. dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 02/11/2007, 14h36
  5. [DOM] Modification du DOM d'une popup
    Par Mike_69 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 28/03/2007, 13h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo