Skip to content

Commit 6559a74

Browse files
aroyanresir014
andauthored
docs: translate useFormStatus (#708)
Co-authored-by: Resi Respati <[email protected]>
1 parent 0e14487 commit 6559a74

File tree

1 file changed

+35
-35
lines changed

1 file changed

+35
-35
lines changed

src/content/reference/react-dom/hooks/useFormStatus.md

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ canary: true
55

66
<Canary>
77

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).
99

1010
</Canary>
1111

1212
<Intro>
1313

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.
1515

1616
```js
1717
const { pending, data, method, action } = useFormStatus();
@@ -23,11 +23,11 @@ const { pending, data, method, action } = useFormStatus();
2323

2424
---
2525

26-
## Reference {/*reference*/}
26+
## Referensi {/*reference*/}
2727

2828
### `useFormStatus()` {/*use-form-status*/}
2929

30-
The `useFormStatus` Hook provides status information of the last form submission.
30+
Hook `useFormStatus` memberikan informasi state pengiriman form terakhir.
3131

3232
```js {5},[[1, 6, "status.pending"]]
3333
import { useFormStatus } from "react-dom";
@@ -47,42 +47,42 @@ export default function App() {
4747
}
4848
```
4949

50-
To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStep step={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 <CodeStep step={1}>`pending`</CodeStep> yang memberi tahu Anda apakah form sedang aktif dikirimkan.
5151

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.
5353

54-
[See more examples below.](#usage)
54+
[Lihat lebih banyak contoh di bawah.](#usage)
5555

56-
#### Parameters {/*parameters*/}
56+
#### Parameter {/*parameters*/}
5757

58-
`useFormStatus` does not take any parameters.
58+
`useFormStatus` tidak menerima parameter apapun.
5959

60-
#### Returns {/*returns*/}
60+
#### Kembalian {/*returns*/}
6161

62-
A `status` object with the following properties:
62+
Objek `status` dengan properti berikut:
6363

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`.
6565

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`.
6767

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).
6969

7070
[//]: # (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`.
7272

73-
#### Caveats {/*caveats*/}
73+
#### Catatan Penting {/*caveats*/}
7474

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.
7777

7878
---
7979

80-
## Usage {/*usage*/}
80+
## Penggunaan {/*usage*/}
8181

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.
8484

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.
8686

8787
<Sandpack>
8888

@@ -133,9 +133,9 @@ export async function submitForm(query) {
133133

134134
<Pitfall>
135135

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*/}
137137

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.
139139

140140
```js
141141
function Form() {
@@ -146,17 +146,17 @@ function Form() {
146146
}
147147
```
148148

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>`.
150150

151151
```js
152152
function Submit() {
153-
// ✅ `pending` will be derived from the form that wraps the Submit component
153+
// ✅ `pending` akan diturunkan dari form yang membungkus komponen Submit
154154
const { pending } = useFormStatus();
155155
return <button disabled={pending}>...</button>;
156156
}
157157

158158
function Form() {
159-
// This is the <form> `useFormStatus` tracks
159+
// Ini adalah <form> yang dipantau oleh `useFormStatus`
160160
return (
161161
<form action={submit}>
162162
<Submit />
@@ -167,11 +167,11 @@ function Form() {
167167

168168
</Pitfall>
169169

170-
### Read the form data being submitted {/*read-form-data-being-submitted*/}
170+
### Membaca data form yang dikirimkan {/*read-form-data-being-submitted*/}
171171

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.
173173

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.
175175

176176
<Sandpack>
177177

@@ -249,12 +249,12 @@ button {
249249
250250
---
251251
252-
## Troubleshooting {/*troubleshooting*/}
252+
## Pemecahan masalah {/*troubleshooting*/}
253253
254-
### `status.pending` is never `true` {/*pending-is-never-true*/}
254+
### `status.pending` tidak pernah `true` {/*pending-is-never-true*/}
255255
256-
`useFormStatus` will only return status information for a parent `<form>`.
256+
`useFormStatus` hanya akan mengembalikan informasi status untuk `<form>` induk.
257257
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>`.
259259
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

Comments
 (0)