Discussion :

[Florent42]

Bonjour

Je débute avec le REACT et je bloque un peu sur la compréhension de la récupération de données d'un formulaire et de son traitement:

J'ai un formulaire standard présent dans mon fichier app.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
function Content() {
	const [username, setUsername] = useState('');
	const [password, setPassword] = useState('');
 
 
    return (
<form>
<input type="text" value={username} onChange={e => setUsername(e.target.value)} />
<input type="password" value={password} onChange={e => setPassword(e.target.value)}/>
<button class="fr-mt-2v fr-btn">Se connecter</button>
}

Je transmets ces variables dans une ma page de traitement que j'ai appelé index.js:
Cette page va récupérrer les données du formulaires, faire le traitement et renvoyé l'affichage à une page "index.html"

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
 
const DataComponent = () => {
	const [username, setUsername] = useState('');
	const [password, setPassword] = useState('');
}
 
const session = await client.auth.logIn({
  expiration, // optional integer. Session life in number of seconds. If omitted, defaults to 3600 (an hour).
  username, // required string
  password, // required string
  backend, // optional string. If omitted, defaults to wazo_user
  mobile, // optional boolean. If omitted, defaults to false: tells if the current user uses a mobile application
  tenantId, // optional string. The tenant identifier (uuid or slug). Needed when backend is external (not wazo_user)
}).then((/* undefined if login failed, or : */{
});
 
const test = ReactDOM.createRoot(document.getElementById('test'));
test.render(
  <React.StrictMode>
    <div>
      <h1>Hello, world!</h1>
      <h2>It is ${username}.</h2>
    </div>
  </React.StrictMode>
);

Enfin dans ma page index.html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 <div id="test"></div>

A ce titre voici mes questions:
- comment puis je récupérer les données du formulaire usnerme et password et les faire traiter pour fichier de traitement (app.js -> index.js)
- dans le fichier index.js, comment les récupérer et les traiter dans mon script
- en terme d'organisation du script j'ai également un doute : lorsque je vais récupérer les données les données du formulaire et les injecter dans mon api, je vais avoir son retour, soit c'est ok (login ok) ou false. A ce moment la, selon la réponse mon affichage va changer. Quelle est la bonne méthode : je repars sur un fichier genre error.js qui me réaffichera ce que je veux(donc index.js -> error.js -> index.js -> index.html) , ou je gère tout dans index.js -> index.html?
- la const "session" est ce que la syntaxe ${username} est bien correcte pour récupérer ce retour de la fonction?

En vous remerciant grandement d'avance pour votre aide!

[mathieu]

petite parenthèse, est ce que votre discussion précédente est résolue ? pensez à cliquer sur si c'est le cas :
https://www.developpez.net/forums/d2.../#post12061328

en ce qui concerne votre formulaire react, si vous voulez traitez les données du formulaire quand l'utilisateur clique sur le bouton, vous pouvez ajoutez du code à l'évènement onClick.
vous pouvez voir un exemple là :
https://fr.react.dev/learn/responding-to-events

pour votre question sur l'organisation des fichiers, à quel endroit voulez vous afficher les résultats de l'appel à l'api ?

[Florent42]

Merci pour ce retour

Merci pour l exemple, je l avais mis, puis enlevé. Mais cet exemple est plus clair car la fonction est dans l export...

Par contre ensuite comment récupérer les valeurs du formulaire ?

[Florent42]

Le tout pour transmettre ces données de form dans une autre page au final

C est aussi mon interrogation.
Jusqu à présent j ai 3 niveaux:
Une sorte de bibliothèque de fonctions qui gère mes entrées (j ai un fichier header.js, un footer.js et chaque partie sera décomposée ainsi), un fichier index.js qui assemble les différents éléments et un fichier index.htm qui affiche.
Déjà est ce que c est cohérent ?

Pour répondre : la réponse de l api devra être analysée et selon l api, soit simplement affichée à l utilisateur (traitement d affichage simple) parfois avant l affichage il devra y avoir une autre api.

[mathieu]

puisque vous utilisez des variables d'état, vous pouvez directement lire la variable username par exemple.

[Florent42]

De cette façon dans index.js : ${username} ?

[Florent42]

Mais sa déclaration pour la récupérer de app.js est correcte comme je l ai indiquée?
Car étrangement le script la considère non declaree