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:
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
