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
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/hooks/useFormStatus.md
+48-45Lines changed: 48 additions & 45 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,13 +5,13 @@ canary: true
5
5
6
6
<Canary>
7
7
8
-
The `useFormStatus`Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
8
+
Le Hook `useFormStatus`n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
9
9
10
10
</Canary>
11
11
12
12
<Intro>
13
13
14
-
`useFormStatus`is a Hook that gives you status information of the last form submission.
14
+
`useFormStatus`est un Hook qui vous fournit des informations d'état sur le dernier envoi de formulaire parent.
To get status information, the `Submit`component must be rendered within a`<form>`. The Hook returns information like the <CodeStepstep={1}>`pending`</CodeStep> property which tells you if the form is actively submitting.
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
-
In the above example, `Submit`uses this information to disable `<button>`presses while the form is submitting.
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
-
[See more examples below.](#usage)
54
+
[Voir plus d'exemples ci-dessous](#usage).
55
55
56
-
#### Parameters {/*parameters*/}
56
+
#### Paramètres {/*parameters*/}
57
57
58
-
`useFormStatus`does not take any parameters.
58
+
`useFormStatus`ne prend aucun paramètre.
59
59
60
-
#### Returns {/*returns*/}
60
+
#### Valeur renvoyée {/*returns*/}
61
61
62
-
A `status`object with the following properties:
62
+
Un objet `status`doté des propriétés suivantes :
63
63
64
-
*`pending`: A boolean. If`true`, this means the parent `<form>`is pending submission. Otherwise,`false`.
64
+
*`pending` : un booléen. Vaut`true` si le `<form>`parent est en cours d'envoi, sinon`false`.
65
65
66
-
*`data`: An object implementing the [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) that contains the data the parent `<form>`is submitting. If there is no active submission or no parent `<form>`, it will be`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
-
*`method`: A string value of either `'get'` or`'post'`. This represents whether the parent `<form>`is submitting with either a `GET` or `POST`[HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). By default, a`<form>`will use the`GET` method and can be specified by the[`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) property.
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
70
70
[//]: #(Link to `<form>` documentation. "Read more on the `action` prop on `<form>`.")
71
-
*`action`: A reference to the function passed to the `action`prop on the parent `<form>`. If there is no parent`<form>`, the property is`null`. If there is a URI value provided to the `action`prop, or no `action`prop specified, `status.action` will be`null`.
71
+
*`action` : une référence vers la fonction passée à la prop `action`du `<form>` parent. S'il n'y a pas de`<form>` parent, cette propriété vaut`null`. Si la prop `action` a reçu une valeur URI, ou si aucune prop`action`n'est spécifiée, cette propriété vaut`null`.
72
72
73
-
#### Caveats {/*caveats*/}
73
+
#### Limitations {/*caveats*/}
74
74
75
-
*The `useFormStatus`Hook must be called from a component that is rendered inside a `<form>`.
76
-
*`useFormStatus`will only return status information for a parent `<form>`. It will not return status information for any `<form>`rendered in that same component or children components.
75
+
*Le Hook `useFormStatus`doit être appelé dans un composant dont le rendu a lieu au sein d'un `<form>`.
76
+
*`useFormStatus`ne renverra que les informations d'état du `<form>` parent. Il ne renverra pas les informations de statut d'un `<form>`placé dans le rendu du composant courant ou de ses composants enfants.
77
77
78
78
---
79
79
80
-
## Usage {/*usage*/}
80
+
## Utilisation {/*usage*/}
81
81
82
-
### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
83
-
To display a pending state while a form is submitting, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
82
+
### Afficher un état d'attente pendant l'envoi du formulaire {/*display-a-pending-state-during-form-submission*/}
84
83
85
-
Here, we use the `pending` property to indicate the form is submitting.
84
+
Pour afficher un état d'attente pendant que le formulaire est en cours d'envoi, vous pouvez utilisez le Hook `useFormStatus` dans un composant au sein du `<form>` et lire la propriété `pending` qu'il renvoie.
85
+
86
+
Nous utilisons ci-dessous la propriété `pending` pour indiquer que le formulaire est en cours d'envoi.
86
87
87
88
<Sandpack>
88
89
@@ -94,7 +95,7 @@ function Submit() {
94
95
const { pending } =useFormStatus();
95
96
return (
96
97
<button type="submit" disabled={pending}>
97
-
{pending ?"Submitting...":"Submit"}
98
+
{pending ?"Envoi en cours...":"Envoyer"}
98
99
</button>
99
100
);
100
101
}
@@ -129,34 +130,36 @@ export async function submitForm(query) {
129
130
"devDependencies": {}
130
131
}
131
132
```
132
-
</Sandpack>
133
+
</Sandpack>
133
134
134
135
<Pitfall>
135
136
136
-
#####`useFormStatus`will not return status information for a `<form>`rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
137
+
#### `useFormStatus`ne renverra pas d'information d'état pour un `<form>`situé dans le même composant. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
137
138
138
-
The `useFormStatus`Hook only returns status information for a parent `<form>`and not for any `<form>`rendered in the same component calling the Hook, or child components.
139
+
Le Hook `useFormStatus`ne renvoie que les informations d'état du `<form>`parent, et non celles d'un `<form>`placé dans le rendu du composant appelant le Hook ou dans ses composants enfants.
139
140
140
141
```js
141
142
functionForm() {
142
-
// 🚩 `pending` will never be true
143
-
// useFormStatus does not track the form rendered in this component
143
+
// 🚩 `pending` ne sera jamais `true`
144
+
// useFormStatus ne surveille pas le formulaire situé dans le
145
+
// rendu de ce composant
144
146
const { pending } =useFormStatus();
145
147
return<form action={submit}></form>;
146
148
}
147
149
```
148
150
149
-
Instead call`useFormStatus`from inside a component that is located inside`<form>`.
151
+
Appelez plutôt`useFormStatus`depuis un composant imbriqué dans`<form>`.
150
152
151
153
```js
152
154
functionSubmit() {
153
-
// ✅ `pending` will be derived from the form that wraps the Submit component
154
-
const { pending } =useFormStatus();
155
+
// ✅ `pending` se basera sur le formulaire qui enrobe
156
+
// le composant Submit
157
+
const { pending } =useFormStatus();
155
158
return<button disabled={pending}>...</button>;
156
159
}
157
160
158
161
functionForm() {
159
-
//This is the <form> `useFormStatus` tracks
162
+
//Voici le <form> surveillé par `useFormStatus`
160
163
return (
161
164
<form action={submit}>
162
165
<Submit />
@@ -167,11 +170,11 @@ function Form() {
167
170
168
171
</Pitfall>
169
172
170
-
### Read the form data being submitted {/*read-form-data-being-submitted*/}
173
+
### Lire les données en cours d'envoi {/*read-form-data-being-submitted*/}
171
174
172
-
You can use the `data`property of the status information returned from `useFormStatus`to display what data is being submitted by the user.
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.
173
176
174
-
Here, we have a form where users can request a username. We can use `useFormStatus`to display a temporary status message confirming what username they have requested.
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é.
175
178
176
179
<Sandpack>
177
180
@@ -203,13 +206,13 @@ export default function UsernameForm() {
203
206
204
207
return (
205
208
<>
206
-
<label>Request a Username:</label><br />
209
+
<label>Réserver l’identifiant :</label><br />
207
210
<input type="text" name="username"/>
208
211
<button type="submit" disabled={pending}>
209
-
{pending ?'Submitting...':'Submit'}
212
+
{pending ?'Envoi en cours...':'Envoyer'}
210
213
</button>
211
214
{showSubmitted ? (
212
-
<p>Submitted request for username: {submittedUsername.current}</p>
215
+
<p>Demande en cours pour l’identifiant : {submittedUsername.current}</p>
213
216
) :null}
214
217
</>
215
218
);
@@ -246,16 +249,16 @@ export async function submitForm(query) {
`useFormStatus`will only return status information for a parent `<form>`.
260
+
`useFormStatus`ne renvoie d'informations d'état que pour un `<form>` parent.
258
261
259
-
If the component that calls`useFormStatus`is not nested in a`<form>`, `status.pending`will always return `false`. Verify `useFormStatus`is called in a component that is a child of a`<form>` element.
262
+
Si le composant qui appelle`useFormStatus`n'est pas imbriqué dans un`<form>`, `status.pending`vaudra toujours `false`. Vérifiez que `useFormStatus`est appelé depuis un composant qui figure à l'intérieur d'un élément`<form>`.
260
263
261
-
`useFormStatus`will not track the status of a `<form>`rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details.
264
+
`useFormStatus`ne surveillera pas l'état d'un `<form>`situé dans le rendu du même composant. Consultez le [Piège](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) pour en savoir plus.
0 commit comments