Récupérer valeur formulaire puis la transmettre sur une API
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:
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:
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:
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!
