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
+35-35Lines changed: 35 additions & 35 deletions
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
+
Hook`useFormStatus`saat ini hanya tersedia di kanal *canary* dan eksperimental React. Pelajari lebih lanjut tentang [kanal rilis React di sini](/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`adalah Hook yang memberi Anda informasi state pengiriman form terakhir.
The`useFormStatus`Hook provides status information of the last form submission.
30
+
Hook`useFormStatus`memberikan informasi state pengiriman form terakhir.
31
31
32
32
```js {5},[[1, 6, "status.pending"]]
33
33
import { useFormStatus } from"react-dom";
@@ -47,42 +47,42 @@ export default function App() {
47
47
}
48
48
```
49
49
50
-
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
+
Untuk mendapatkan informasi state, komponen`Submit`harus di-_render_ dalam `<form>`. Hook mengembalikan informasi seperti properti <CodeStepstep={1}>`pending`</CodeStep> yang memberi tahu Anda apakah form sedang aktif dikirimkan.
51
51
52
-
In the above example, `Submit`uses this information to disable `<button>`presses while the form is submitting.
52
+
Pada contoh di atas, `Submit`menggunakan informasi ini untuk menonaktifkan penekanan `<button>`ketika form dikirimkan.
53
53
54
-
[See more examples below.](#usage)
54
+
[Lihat lebih banyak contoh di bawah.](#usage)
55
55
56
-
#### Parameters {/*parameters*/}
56
+
#### Parameter {/*parameters*/}
57
57
58
-
`useFormStatus`does not take any parameters.
58
+
`useFormStatus`tidak menerima parameter apapun.
59
59
60
-
#### Returns {/*returns*/}
60
+
#### Kembalian {/*returns*/}
61
61
62
-
A`status`object with the following properties:
62
+
Objek`status`dengan properti berikut:
63
63
64
-
*`pending`: A boolean. If`true`, this means the parent `<form>`is pending submission. Otherwise, `false`.
64
+
*`pending`: Sebuah boolean. Jika`true`, ini berarti `<form>`induk sedang menunggu pengiriman. Jika tidak, `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`: Objek yang mengimplementasikan [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)yang berisi data yang dikirimkan oleh `<form>`induk. Jika tidak ada kiriman atau tidak ada induk `<form>`, maka akan menjadi`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`: Nilai string dari `'get'`atau`'post'`. Ini menunjukkan apakah `<form>`induk mengirimkan dengan [metode HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)`GET` atau `POST`. Secara default, `<form>`akan menggunakan metode`GET`dan dapat ditentukan oleh properti [`method`](https://developer.mozilla.org/en-US/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`: Referensi fungsi yang diteruskan ke prop `action`pada `<form>` induk. Jika tidak ada `<form>` induk, propertinya adalah `null`. Jika ada URI yang diberikan ke prop`action`, atau tidak ada prop `action`yang ditentukan, `status.action`akan menjadi`null`.
72
72
73
-
#### Caveats {/*caveats*/}
73
+
#### Catatan Penting {/*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
+
*Hook`useFormStatus`harus dipanggil dari komponen yang di-_render_ di dalam`<form>`.
76
+
*`useFormStatus`hanya akan mengembalikan informasi status untuk `<form>` induk. Ini tidak akan mengembalikan informasi status untuk `<form>`apapun yang di-_render_ dalam komponen yang sama atau komponen anak.
77
77
78
78
---
79
79
80
-
## Usage {/*usage*/}
80
+
## Penggunaan {/*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
+
### Menampilkan state tertunda selama pengiriman form {/*display-a-pending-state-during-form-submission*/}
83
+
Untuk menampilkan state tertunda saat form dikirimkan, Anda dapat memanggil Hook`useFormStatus`dalam komponen yang di-_render_ dalam `<form>`dan membaca properti`pending`yang dikembalikan.
84
84
85
-
Here, we use the`pending`property to indicate the form is submitting.
85
+
Di sini, kami menggunakan properti`pending`untuk menunjukkan bahwa form sedang dikirimkan.
86
86
87
87
<Sandpack>
88
88
@@ -133,9 +133,9 @@ export async function submitForm(query) {
133
133
134
134
<Pitfall>
135
135
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*/}
136
+
##### `useFormStatus`tidak akan mengembalikan informasi status untuk `<form>`yang di-_render_ dalam komponen yang sama. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
137
137
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.
138
+
Hook`useFormStatus`hanya mengembalikan informasi status untuk `<form>`induk dan bukan untuk`<form>`apa pun yang di-_render_ dalam komponen yang sama yang memanggil Hook, atau komponen anak.
139
139
140
140
```js
141
141
functionForm() {
@@ -146,17 +146,17 @@ function Form() {
146
146
}
147
147
```
148
148
149
-
Instead call`useFormStatus`from inside a component that is located inside`<form>`.
149
+
Seharusnya panggil`useFormStatus`dari dalam komponen yang terletak di dalam`<form>`.
150
150
151
151
```js
152
152
functionSubmit() {
153
-
// ✅ `pending` will be derived from the form that wraps the Submit component
153
+
// ✅ `pending` akan diturunkan dari form yang membungkus komponen Submit
154
154
const { pending } =useFormStatus();
155
155
return<button disabled={pending}>...</button>;
156
156
}
157
157
158
158
functionForm() {
159
-
//This is the <form> `useFormStatus` tracks
159
+
//Ini adalah <form> yang dipantau oleh `useFormStatus`
160
160
return (
161
161
<form action={submit}>
162
162
<Submit />
@@ -167,11 +167,11 @@ function Form() {
167
167
168
168
</Pitfall>
169
169
170
-
### Read the form data being submitted {/*read-form-data-being-submitted*/}
170
+
### Membaca data form yang dikirimkan {/*read-form-data-being-submitted*/}
171
171
172
-
You can use the`data`property of the status information returned from`useFormStatus`to display what data is being submitted by the user.
172
+
Anda dapat menggunakan properti`data`dari informasi status yang dikembalikan dari`useFormStatus`untuk menampilkan data apa yang dikirimkan oleh pengguna.
173
173
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.
174
+
Di sini, kita memiliki form di mana pengguna dapat meminta nama pengguna. Kita dapat menggunakan`useFormStatus`untuk menampilkan pesan status sementara yang menginformasikan nama pengguna yang mereka minta.
`useFormStatus`will only returnstatus information for a parent `<form>`.
256
+
`useFormStatus`hanya akan mengembalikan informasi status untuk `<form>` induk.
257
257
258
-
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.
258
+
Jika komponen yang memanggil `useFormStatus`tidak disarangkan dalam `<form>`, `status.pending`akan selalu mengembalikan`false`. Pastikan`useFormStatus`dipanggil dalam komponen yang merupakan turunan dari elemen `<form>`.
259
259
260
-
`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.
260
+
`useFormStatus`tidak akan melacak status `<form>`yang di-_render_ dalam komponen yang sama. Lihat [Sandungan](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) untuk lebih detail.
0 commit comments