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/components/common.md
+11-44Lines changed: 11 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -247,30 +247,6 @@ Berikut *events* yang aktif pada beberapa sumber daya seperti [`<audio>`](https:
247
247
Alih-alih menggunakan sebuah objek ref (seperti yang dikembalikan oleh [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), anda dapat mengoper sebuah fungsi ke atribut `ref`.
248
248
249
249
```js
250
-
<<<<<<<HEAD
251
-
<div ref={(node) =>console.log(node)} />
252
-
```
253
-
254
-
[Lihat contoh dari penggunaan dari *callback*`ref`.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
255
-
256
-
Saat *node* DOM `<div>` ditambahkan pada layar, React akan memanggil *callbak* dari `ref` beserta dengan `node` DOM sebagai sebuah argumen. Saat *node* DOM `<div>` tersebut dihapus, React akan memanggil *callback*`ref` dengan `null`
257
-
258
-
React juga akan memanggi *callback*`ref` setiap kali anda mengoper sebuah *callback*`ref` yang berbeda. Pada contoh di atas, `(node) => { ... }` adalah fungsi yang berbeda pada setiap *render*. Saat komponen anda mengalami *render* ulang, fungsi sebelumnya akan dipanggil dengan `null` sebagai argumennya, dan fungsi selanjutnya akan dipanggi dengan *node* DOM.
259
-
260
-
#### Parameter {/*ref-callback-parameters*/}
261
-
262
-
*`node`: Sebuah *node* DOM atau `null`. React akan mengoper kepada anda *node* DOM saat ref terpasang, dan `null` saat ref dilepas. Kecuali, jika anda mengoper referensi fungsi yang sama untuk *callback*`ref` pada setiap *render*, *callback* tersebut akan secara sementara dilepaskan dan dipasang kembali pada setiap *render* ulang dari komponen tersebut.
263
-
264
-
<Canary>
265
-
266
-
#### Kembalian {/*returns*/}
267
-
268
-
***opsional** fungsi `cleanup`: Ketika `ref` dilepas, React akan memanggil fungsi `cleanup`. Jika fungsi tidak dikembalikan oleh *callback*`ref`, React akan memanggil ulang *callback* dengan `null` sebagai argumen ketika `ref` dilepas.
269
-
270
-
```js
271
-
272
-
=======
273
-
>>>>>>>50d6991ca6652f4bc4c985cf0c0e593864f2cc91
274
250
<div ref={(node) => {
275
251
console.log('Attached', node);
276
252
@@ -280,41 +256,32 @@ React juga akan memanggi *callback* `ref` setiap kali anda mengoper sebuah *call
280
256
}}>
281
257
```
282
258
283
-
<<<<<<< HEAD
284
-
#### Catatan Penting {/*caveats*/}
285
-
286
-
* Ketika mode Strict diaktifkan, React akan **menjalankan satu siklus *setup+cleanup* khusus pengembangan tambahan** sebelum penyiapan sebenarnya yang pertama. Ini adalah *stress-test* yang memastikan bahwa logika pembersihan Anda "mencerminkan" logika pengaturan Anda dan menghentikan atau membatalkan apa pun yang sedang dilakukan pengaturan. Jika ini menyebabkan masalah, implementasikan fungsi pembersihan.
287
-
* Ketika Anda mengoper *callback*`ref`*yang berbeda*, React akan memanggil fungsi pembersihan *callback**sebelumnya* jika disediakan. Jika fungsi pembersihan tidak ditentukan, callback `ref` akan dipanggil dengan `null` sebagai argumennya. Fungsi *next* akan dipanggil dengan simpul DOM.
288
-
289
-
</Canary>
290
-
=======
291
-
[See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
259
+
[Lihat contoh penggunaan *callback*`ref`.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
292
260
293
-
When the `<div>`DOM node is added to the screen, React will call your`ref`callback with the DOM `node`as the argument. When that `<div>`DOM node is removed, React will call your the cleanup function returned from the callback.
261
+
Ketika simpul DOM `<div>`ditambahkan ke layar, React akan memanggil *callback*`ref`Anda dengan DOM `node`sebagai argumen. Ketika simpul DOM `<div>`tersebut dihapus, React akan memanggil fungsi pembersihan yang dikembalikan dari *callback*.
294
262
295
-
React will also call your`ref`callback whenever you pass a *different*`ref`callback. In the above example, `(node) => { ... }`is a different function on every render. When your component re-renders, the *previous* function will be called with `null`as the argument, and the *next* function will be called with the DOM node.
263
+
React juga akan memanggil *callback*`ref`Anda setiap kali Anda meneruskan *callback*`ref`yang *berbeda*. Dalam contoh di atas, `(node) => { ... }`adalah fungsi yang berbeda pada setiap render. Ketika komponen Anda dirender ulang, fungsi *sebelumnya* akan dipanggil dengan `null`sebagai argumen, dan fungsi *berikutnya* akan dipanggil dengan simpul DOM.
296
264
297
-
#### Parameters {/*ref-callback-parameters*/}
265
+
#### Parameter {/*ref-callback-parameters*/}
298
266
299
-
*`node`: A DOM node. React will pass you the DOM node when the ref gets attached. Unless you pass the same function reference for the`ref`callback on every render, the callback will get temporarily cleanup and re-create during every re-render of the component.
267
+
*`node`: Sebuah simpul DOM. React akan memberikan simpul DOM kepada Anda saat ref dilampirkan. Kecuali Anda memberikan referensi fungsi yang sama untuk *callback*`ref`pada setiap render, *callback* akan dibersihkan sementara dan dibuat ulang selama setiap render ulang komponen.
300
268
301
269
<Note>
302
270
303
-
#### React 19 added cleanup functions for `ref` callbacks. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
271
+
#### React 19 menambahkan fungsi pembersihan untuk *callback*`ref`. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
304
272
305
273
To support backwards compatibility, if a cleanup function is not returned from the `ref` callback, `node` will be called with `null` when the `ref` is detached. This behavior will be removed in a future version.
306
274
307
275
</Note>
308
276
309
-
#### Returns {/*returns*/}
277
+
#### Kembalian {/*returns*/}
310
278
311
-
***optional**`cleanup function`: When the `ref`is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with`null`as the argument when the `ref`gets detached. This behavior will be removed in a future version.
279
+
***opsional**`fungsi pembersihan`: Ketika `ref`dilepaskan, React akan memanggil fungsi pembersihan. Jika suatu fungsi tidak dikembalikan oleh *callback*`ref`, React akan memanggil *callback* lagi dengan`null`sebagai argumen ketika `ref`dilepaskan. Perilaku ini akan dihapus di versi mendatang.
312
280
313
-
#### Caveats {/*caveats*/}
281
+
#### Catatan Penting {/*caveats*/}
314
282
315
-
* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
316
-
* When you pass a *different*`ref` callback, React will call the *previous* callback's cleanup function if provided. If no cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
317
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
283
+
* Ketika mode Strict diaktifkan, React akan **menjalankan satu siklus *setup+cleanup* khusus pengembangan tambahan** sebelum penyiapan sebenarnya yang pertama. Ini adalah *stress-test* yang memastikan bahwa logika pembersihan Anda "mencerminkan" logika pengaturan Anda dan menghentikan atau membatalkan apa pun yang sedang dilakukan pengaturan. Jika ini menyebabkan masalah, implementasikan fungsi pembersihan.
284
+
* Ketika Anda mengoper *callback*`ref`*yang berbeda*, React akan memanggil fungsi pembersihan *callback**sebelumnya* jika disediakan. Jika fungsi pembersihan tidak ditentukan, callback `ref` akan dipanggil dengan `null` sebagai argumennya. Fungsi *next* akan dipanggil dengan simpul DOM.
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/form.md
+8-44Lines changed: 8 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,16 +2,6 @@
2
2
title: "<form>"
3
3
---
4
4
5
-
<<<<<<< HEAD
6
-
<Canary>
7
-
8
-
Ekstensi React untuk `<form>` saat ini hanya tersedia di kanal *canary* dan eksperimental React. Pada rilis stabil React, `<form>` hanya berfungsi sebagai [komponen HTML bawaan peramban](https://react.dev/reference/react-dom/components#all-html-components). Pelajari lebih lanjut tentang [kanal rilis React di sini](/community/versioning-policy#all-release-channels).
9
-
10
-
</Canary>
11
-
12
-
13
-
=======
14
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
15
5
<Intro>
16
6
17
7
[Komponen `<form>` bawaan peramban](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) memungkinkan Anda membuat kontrol interaktif untuk mengirimkan informasi.
@@ -60,11 +50,7 @@ Untuk membuat kontrol interaktif untuk mengirimkan informasi, render [komponen `
60
50
61
51
### Menangani pengiriman formulir di klien {/*handle-form-submission-on-the-client*/}
62
52
63
-
<<<<<<< HEAD
64
-
Lepaskan sebuah fungsi ke prop `action` dari formulir untuk menjalankan fungsi tersebut saat formulir disubmit. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) akan diteruskan ke fungsi sebagai argumen sehingga Anda dapat mengakses data yang dikirimkan oleh formulir. Ini berbeda dari konvensional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), yang hanya menerima URL.
65
-
=======
66
-
Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
67
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
53
+
Lepaskan sebuah fungsi ke prop `action` dari formulir untuk menjalankan fungsi tersebut saat formulir disubmit. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) akan diteruskan ke fungsi sebagai argumen sehingga Anda dapat mengakses data yang dikirimkan oleh formulir. Ini berbeda dari [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action) konvensional, yang hanya menerima URL.
68
54
69
55
<Sandpack>
70
56
@@ -85,23 +71,13 @@ export default function Search() {
85
71
86
72
</Sandpack>
87
73
88
-
<<<<<<< HEAD
89
-
### Menangani pengiriman formulir dengan Server Action {/*handle-form-submission-with-a-server-action*/}
74
+
### Menangani pengiriman formulir dengan Fungsi Server {/*handle-form-submission-with-a-server-action*/}
90
75
91
-
Render sebuah `<form>` dengan input dan tombol kirim. Lepaskan Server Action (sebuah fungsi yang ditandai dengan [`'use server'`](/reference/rsc/use-server)) ke prop `action` dari formulir untuk menjalankan fungsi tersebut saat formulir disubmit.
76
+
Render sebuah `<form>` dengan input dan tombol kirim. Lepaskan Fungsi Server (sebuah fungsi yang ditandai dengan [`'use server'`](/reference/rsc/use-server)) ke prop `action` dari formulir untuk menjalankan fungsi tersebut saat formulir disubmit.
92
77
93
-
Melewatkan Server Action ke `<form action>` memungkinkan pengguna untuk mengirimkan formulir tanpa JavaScript yang diaktifkan atau sebelum kode dimuat. Ini menguntungkan bagi pengguna yang memiliki koneksi lambat, perangkat, atau yang memiliki JavaScript dinonaktifkan dan mirip dengan cara kerja formulir ketika URL diberikan ke prop `action`.
78
+
Melewatkan Fungsi Server ke `<form action>` memungkinkan pengguna untuk mengirimkan formulir tanpa JavaScript yang diaktifkan atau sebelum kode dimuat. Ini menguntungkan bagi pengguna yang memiliki koneksi lambat, perangkat, atau yang memiliki JavaScript dinonaktifkan dan mirip dengan cara kerja formulir ketika URL diberikan ke prop `action`.
94
79
95
-
Anda dapat menggunakan *field* formulir tersembunyi untuk memberikan data ke aksi `<form>`'s. Server Action akan dipanggil dengan data *field* formulir tersembunyi sebagai *instance* dari [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
96
-
=======
97
-
### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
98
-
99
-
Render a `<form>` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
100
-
101
-
Passing a Server Function to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
102
-
103
-
You can use hidden form fields to provide data to the `<form>`'s action. The Server Function will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
104
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
80
+
Anda dapat menggunakan *field* formulir tersembunyi untuk memberikan data ke aksi `<form>`. Fungsi Server akan dipanggil dengan data *field* formulir tersembunyi sebagai *instance* dari [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
105
81
106
82
```jsx
107
83
import { updateCart } from'./lib.js';
@@ -140,11 +116,7 @@ function AddToCart({productId}) {
140
116
}
141
117
```
142
118
143
-
<<<<<<< HEAD
144
-
Ketika `<form>` dirender oleh [Server Component](/reference/rsc/use-client), dan [Server Action](/reference/rsc/use-server) diteruskan ke prop `action``<form>`, formulir akan [ditingkatkan secara progresif](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
145
-
=======
146
-
When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
147
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
119
+
Ketika `<form>` dirender oleh [Server Component](/reference/rsc/use-client), dan [Fungsi Server](/reference/rsc/server-functions) diteruskan ke prop `action``<form>`, formulir akan [ditingkatkan secara progresif](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
148
120
149
121
### Menampilkan status tertunda selama pengiriman formulir {/*display-a-pending-state-during-form-submission*/}
150
122
Untuk menampilkan status tertunda ketika formulir sedang dikirim, Anda dapat memanggil Hook `useFormStatus` dalam komponen yang dirender dalam `<form>` dan membaca properti `pending` yang dikembalikan.
@@ -304,19 +276,11 @@ export default function Search() {
304
276
305
277
Menampilkan pesan kesalahan pengiriman formulir sebelum bundel JavaScript dimuat untuk peningkatan progresif mengharuskan bahwa:
306
278
307
-
<<<<<<< HEAD
308
279
1.`<form>` dirender oleh [Server Component](/reference/rsc/use-client)
309
-
1. fungsi yang diteruskan ke prop `action``<form>` adalah [Server Action](/reference/rsc/use-server)
280
+
1. fungsi yang diteruskan ke prop `action``<form>` adalah [Fungsi Server](/reference/rsc/server-functions)
310
281
1. Hook `useActionState` digunakan untuk menampilkan pesan kesalahan
311
282
312
-
`useActionState` mengambil dua parameter: sebuah [Server Action](/reference/rsc/use-server) dan sebuah *state* awal. `useActionState` mengembalikan dua nilai, sebuah variabel *state* dan sebuah aksi. Aksi yang dikembalikan oleh `useActionState` harus diteruskan ke prop `action` dari formulir. Variabel *state* yang dikembalikan oleh `useActionState` dapat digunakan untuk menampilkan pesan kesalahan. Nilai yang dikembalikan oleh [Server Action](/reference/rsc/use-server) yang diteruskan ke `useActionState` akan digunakan untuk memperbarui variabel *state*.
313
-
=======
314
-
1.`<form>` be rendered by a [Server Component](/reference/rsc/use-client)
315
-
1. the function passed to the `<form>`'s `action` prop be a [Server Function](/reference/rsc/server-functions)
316
-
1. the `useActionState` Hook be used to display the error message
317
-
318
-
`useActionState` takes two parameters: a [Server Function](/reference/rsc/server-functions) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to display an error message. The value returned by the Server Function passed to `useActionState` will be used to update the state variable.
319
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
283
+
`useActionState` mengambil dua parameter: sebuah [Fungsi Server](/reference/rsc/server-functions) dan sebuah *state* awal. `useActionState` mengembalikan dua nilai, sebuah variabel *state* dan sebuah aksi. Aksi yang dikembalikan oleh `useActionState` harus diteruskan ke prop `action` dari formulir. Variabel *state* yang dikembalikan oleh `useActionState` dapat digunakan untuk menampilkan pesan kesalahan. Nilai yang dikembalikan oleh Fungsi Server yang diteruskan ke `useActionState` akan digunakan untuk memperbarui variabel *state*.
0 commit comments