You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Le Hook `useFormStatus` vous fournit des informations d'état sur le dernier envoi de formulaire.
30
+
Le Hook `useFormStatus` vous fournit des informations d'état sur le dernier envoi de formulaire parent.
31
31
32
32
```js {5},[[1, 6, "status.pending"]]
33
33
import { useFormStatus } from"react-dom";
@@ -47,9 +47,9 @@ export default App() {
47
47
}
48
48
```
49
49
50
-
Pour récupérer les informations d'état, le composant `Submit` doit faire sonrendu au sein d'un `<form>`. Le Hook renvoie des informations telles que la propriété <CodeStepstep={1}>`pending`</CodeStep>, qui vous indique si le formulaire est en cours d'envoi.
50
+
Pour récupérer les informations d'état, le composant `Submit` doit être utilisé au sein d'un `<form>`. Le Hook renvoie des informations telles que la propriété <CodeStepstep={1}>`pending`</CodeStep>, qui vous indique si le formulaire est en cours d'envoi.
51
51
52
-
Dans l'exemple ci-dessus, `Submit` utilise cette information pour désactiver le`<button>` pendant l'envoi du formulaire.
52
+
Dans l'exemple ci-dessus, `Submit` utilise cette information pour désactiver l'interactivité du`<button>` pendant l'envoi du formulaire.
53
53
54
54
[Voir plus d'exemples ci-dessous](#usage).
55
55
@@ -63,7 +63,7 @@ Un objet `status` doté des propriétés suivantes :
63
63
64
64
*`pending` : un booléen. Vaut `true` si le `<form>` parent est en cours d'envoi, sinon `false`.
65
65
66
-
*`data` : un objet qui implémente [l'interface `FormData`](https://developer.mozilla.org/docs/Web/API/FormData), contenant les données que le `<form>` parent est en train d'envoyer. Si aucun envoi n'est en cours, ou qu'il n'y a pas de `<form>` parent, cette propriété vaut `null`.
66
+
*`data` : un objet qui implémente [l'interface `FormData`](https://developer.mozilla.org/docs/Web/API/FormData), contenant les données que le `<form>` parent est en train d'envoyer. Si aucun envoi n'est en cours, ou s'il n'y a pas de `<form>` parent, cette propriété vaut `null`.
67
67
68
68
*`method` : une chaîne de caractères valant soit `'get'`, soit `'post'`, selon que le `<form>` parent est en train de faire un envoi avec une [méthode HTTP](https://developer.mozilla.org/docs/Web/HTTP/Methods)`GET` ou `POST`. Par défaut, un `<form>` utilisera la méthode `GET`, mais ça peut être spécifié par l'attribut [`method`](https://developer.mozilla.org/docs/Web/HTML/Element/form#method).
69
69
@@ -152,7 +152,7 @@ Appelez plutôt `useFormStatus` depuis un composant imbriqué dans `<form>`.
152
152
153
153
```js
154
154
functionSubmit() {
155
-
// ✅ `pending` se basera sur le fomrulaire qui enrobe
155
+
// ✅ `pending` se basera sur le formulaire qui enrobe
156
156
// le composant Submit
157
157
const { pending } =useFormStatus();
158
158
return<button disabled={pending}>...</button>;
@@ -172,9 +172,9 @@ function Form() {
172
172
173
173
### Lire les données en cours d'envoi {/*read-form-data-being-submitted*/}
174
174
175
-
Vous pouvez utiliser la propriété `data` des informations d'état renvoyées par `useFormStatus`afin d'afficher les données que l'utilisateur est en train d'envoyer.
175
+
Vous pouvez utiliser la propriété `data` des informations d'état renvoyées par `useFormStatus`pour afficher les données que l'utilisateur est en train d'envoyer.
176
176
177
-
Dans l'exemple ci-dessous, nous avons un formulaire permettant à l'utilisateur de demander un identifiant. Nous pouvons y utiliser `useFormStatus` pour afficher un message temporaire confirmant l'identifiant demandé.
177
+
Dans l'exemple ci-dessous, nous avons un formulaire permettant à l'utilisateur de réserver un identifiant. Nous pouvons y utiliser `useFormStatus` pour afficher un message temporaire confirmant l'identifiant demandé.
178
178
179
179
<Sandpack>
180
180
@@ -206,7 +206,7 @@ export default function UsernameForm() {
0 commit comments