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!