1
00:00:02,180 --> 00:00:04,700
Negara adalah konsep penting dalam bereaksi.

2
00:00:05,060 --> 00:00:10,820
Dan dengan pengetahuan kami tentang keadaan, kami sekarang juga dapat memastikan bahwa kami tidak hanya membuat tujuan tiruan,

3
00:00:10,940 --> 00:00:13,640
tetapi kami benar-benar mencerminkan input pengguna yang sebenarnya.

4
00:00:14,060 --> 00:00:15,740
Jadi untuk itu, mari kembali ke tujuan baru.

5
00:00:16,280 --> 00:00:24,860
Apa yang ingin Anda lakukan adalah kami ingin menyimpan input pengguna dalam beberapa variabel pada setiap penekanan tombol sehingga kami memiliki nilai terbaru yang dimasukkan

6
00:00:24,860 --> 00:00:32,300
oleh pengguna dan kemudian meneruskan nilai yang dimasukkan itu ke alat peraga pada sasaran iklan atau ke sasaran baru kami di

7
00:00:32,300 --> 00:00:36,170
sini alih-alih teks boneka hardcode yang kita miliki saat ini.

8
00:00:36,950 --> 00:00:37,750
Jadi ini dia.

9
00:00:37,880 --> 00:00:43,610
Saya ingin menangkap input pengguna di sini dan mengirim ini alih-alih susah payah saya ke teks di sini sebagai bagian dari tujuan

10
00:00:43,610 --> 00:00:44,090
baru.

11
00:00:44,840 --> 00:00:54,470
Jadi kita bisa membuat variabel di sini, input pengguna atau teks yang dimasukkan mungkin, yang awalnya merupakan string kosong.

12
00:00:55,280 --> 00:00:58,520
Dan di sini atas input, mereka sebenarnya diatur pada acara perubahan.

13
00:00:58,580 --> 00:01:00,740
Kita dapat mendengarkan yang dipecat dan setiap keystroke.

14
00:01:01,310 --> 00:01:02,570
Jadi sekarang kita bisa menambahkan fungsi.

15
00:01:05,330 --> 00:01:07,240
Penanganan perubahan teks.

16
00:01:08,220 --> 00:01:14,400
Di sana kita akan mendapatkan objek acara dan objek acara itu akan menyimpan input pengguna pada acara.

17
00:01:15,470 --> 00:01:21,080
Target, yang mengacu pada elemen input, nilai titik, dan oleh karena itu kita dapat mengatur memasukkan teks sama dengan

18
00:01:21,080 --> 00:01:21,620
itu.

19
00:01:23,440 --> 00:01:26,410
Sekarang, masukkan teks akan berubah dengan setiap penekanan tombol.

20
00:01:26,620 --> 00:01:30,730
Setelah kami ikat pada perubahan ke text handler perubahan seperti ini.

21
00:01:32,720 --> 00:01:37,790
Sekarang, di sini, di tujuan baru, kita dapat menggunakan teks masukan.

22
00:01:37,880 --> 00:01:39,160
Jadi apa, pengguna masuk ke sini?

23
00:01:40,150 --> 00:01:45,900
Dan setelah itu, mari kita semua konsol terkunci dan Anda pergi di sini sehingga kita dapat melihat bahwa ini berfungsi,

24
00:01:45,900 --> 00:01:50,310
jika kita sekarang aman dan saya masukkan tes di sini dan saya klik pada tujuan.

25
00:01:50,910 --> 00:01:52,890
Kami melihat ini berfungsi dan ini adalah keluaran di sini.

26
00:01:54,050 --> 00:01:58,490
Pendekatan ini umumnya baik-baik saja, tetapi dapat memiliki satu kelemahan kecil.

27
00:01:58,850 --> 00:02:01,430
Bagaimana jika kita ingin mengatur ulang ini setelah menambahkan tujuan baru?

28
00:02:01,970 --> 00:02:04,340
Tentu saja, kita bisa pergi ke rumah kita.

29
00:02:05,540 --> 00:02:06,560
Penangan emas iklan.

30
00:02:08,470 --> 00:02:12,490
Dan begitu kami membuat tujuan baru, kami tentu saja dapat mengatur memasukkan teks kembali ke string kosong.

31
00:02:13,330 --> 00:02:14,800
Tapi tentu saja, ini tidak akan melakukan apa pun.

32
00:02:15,280 --> 00:02:18,640
Jika saya memasukkan tujuannya, Anda tahu, ini tidak tercermin di sini.

33
00:02:18,700 --> 00:02:19,960
Mengapa itu tidak tercermin?

34
00:02:20,470 --> 00:02:22,410
Karena komponen emas baru tidak menghasilkan.

35
00:02:22,510 --> 00:02:24,170
Ini bukan kondisi yang kami kelola.

36
00:02:24,190 --> 00:02:25,540
Ini adalah variabel reguler.

37
00:02:25,600 --> 00:02:27,040
Jadi, tentu saja, kita bisa mengubahnya.

38
00:02:27,280 --> 00:02:28,930
Tentu saja bisa kita gunakan untuk mengubah nilainya.

39
00:02:29,230 --> 00:02:31,480
Tetapi jika kita kemudian menetapkan nilai baru untuk itu.

40
00:02:31,900 --> 00:02:37,150
Ini tidak tercermin pada input kami karena input ini hanya memiliki koneksi ke penangan perubahan teks.

41
00:02:37,480 --> 00:02:42,040
Itu tidak tahu bahwa itu harus mencerminkan nilai saat ini disimpan dan dimasukkan teks.

42
00:02:42,850 --> 00:02:47,260
Sekarang kita bisa memberi tahu komponen input bahwa ia harus melakukannya dengan mengikat prop nilainya.

43
00:02:47,710 --> 00:02:52,390
Kami dapat mengikat ini ke teks yang dimasukkan dan dengan ayah kami memberi tahu komponen input.

44
00:02:52,600 --> 00:02:58,300
Hai, nilai yang ditampilkan di input harus didevaluasi, disimpan, dan dimasukkan.

45
00:02:58,330 --> 00:02:58,870
Teks.

46
00:02:59,840 --> 00:03:02,540
Jika kita melakukan itu, kita akan tahu sesuatu yang baru.

47
00:03:03,140 --> 00:03:07,430
Sekarang, kita tidak bisa mengetik di sana lagi, jika saya mengetik di sini, input tidak tercermin.

48
00:03:08,000 --> 00:03:10,190
Sekarang, jika Anda memikirkannya, itu masuk akal.

49
00:03:10,660 --> 00:03:16,010
Ketika Anda memberi tahu reaktansi bahwa input harus diberikan sedemikian rupa sehingga nilainya untuk dimasukkan, ke teks

50
00:03:16,460 --> 00:03:21,220
dengan setiap penekanan tombol yang kami ubah, masukkan teks, tetapi masukkan teks tidak menyatakan.

51
00:03:21,230 --> 00:03:22,400
Itu variabel biasa.

52
00:03:22,850 --> 00:03:28,250
Jadi itu berarti bahwa kita mengubah variabel dengan setiap penekanan tombol tetapi bereaksi ribuan rewriter komponen

53
00:03:28,250 --> 00:03:28,790
input.

54
00:03:28,880 --> 00:03:34,910
Itu tidak mencerminkan nilai yang diperbarui untuk bereaksi, selalu mendevaluasi sebagai string kosong karena itu adalah kali

55
00:03:34,910 --> 00:03:40,460
terakhir ia membuat komponen ini dan Delford mengeluarkan kode X dan karenanya sebagai input.

56
00:03:41,180 --> 00:03:46,220
Jadi kita perlu memberi tahu bereaksi bahwa ini adalah beberapa keadaan dan bahwa ketika itu berubah, itu harus membuat kembali J kita

57
00:03:46,220 --> 00:03:47,090
sebagai kode X.

58
00:03:47,990 --> 00:03:54,890
Jadi sekali lagi, kami dapat mengimpor Anda sebagai status di sini dan mengonversi masuk ke penggunaan teks yang sudah terstruktur di sini dan

59
00:03:54,890 --> 00:04:00,080
Anda menyatakan awalnya adalah string kosong atau memiliki string kosong awalnya di sini karena saya mengelola teks

60
00:04:00,080 --> 00:04:01,030
yang saya masukkan.

61
00:04:01,370 --> 00:04:06,250
Dan elemen kedua adalah fungsi untuk memperbarui keadaan yang karenanya akan memanggil teks yang dimasukkan.

62
00:04:07,400 --> 00:04:14,690
Dan sekarang di sini pada setiap penekanan tombol, saya mengatur teks yang dimasukkan untuk mendevaluasi nilai target acara.

63
00:04:15,050 --> 00:04:20,240
Dan di sini kita tidak perlu bentuk fungsi memperbarui negara karena kita memiliki nilai baru yang

64
00:04:20,240 --> 00:04:22,160
tidak bergantung pada negara sebelumnya.

65
00:04:22,430 --> 00:04:25,010
Jadi kita bisa memperbarui ke set seperti ini.

66
00:04:25,940 --> 00:04:27,410
Dan sekarang ini akan.

67
00:04:28,880 --> 00:04:35,330
Buat ulang komponen ini setiap kali kita mengetik, setiap kali kita memanggil set, masukkan masih pada setiap penekanan tombol, yang

68
00:04:35,360 --> 00:04:37,010
terdengar mengerikan tapi bagus.

69
00:04:37,130 --> 00:04:37,550
Reaksi.

70
00:04:37,550 --> 00:04:43,460
Kami akan melakukan ini dengan cara yang sangat efisien dan oleh karena itu nilai terbaru ini akan tercermin pada elemen

71
00:04:43,490 --> 00:04:43,850
input.

72
00:04:44,480 --> 00:04:51,230
Dan di sini di ADCO Handler, jika kita ingin memperbarui, memasukkan, teks dan mengatur ulang, kita dapat def recall, mengatur, memasukkan teks

73
00:04:51,440 --> 00:04:53,570
dan mengaturnya kembali ke string kosong.

74
00:04:54,280 --> 00:04:56,960
Dan dengan itu kita sekarang memiliki yang terbaik dari kedua dunia.

75
00:04:56,990 --> 00:04:59,300
Kita dapat memasukkan sesuatu di sini yang semuanya berfungsi.

76
00:04:59,570 --> 00:05:05,690
Tetapi kita juga dapat memanipulasinya dan mengatur ulang setelah menambahkan tujuan baru seperti ini.

77
00:05:06,590 --> 00:05:09,980
Jadi ini sekarang dan tidak pernah menggunakan kasus untuk manajemen negara.

78
00:05:10,100 --> 00:05:13,340
Dan tentu saja ada banyak kasus penggunaan dalam aplikasi REACT kami.

79
00:05:13,940 --> 00:05:20,840
Dan di sini kita menggunakan manajemen negara untuk membuat sesuatu yang kadang-kadang juga disebut cara mengikat di mana

80
00:05:21,290 --> 00:05:27,020
mengikat nilai input dan pada setiap penekanan tombol kita memperbarui ke nilai, yang kemudian kita

81
00:05:27,020 --> 00:05:32,660
ikat kembali ke input sehingga kita selalu mencerminkan nilai terbaru di dalam input.

82
00:05:32,990 --> 00:05:36,560
Tetapi kami juga dapat mengelola ini dengan cara yang didorong oleh negara.

83
00:05:36,770 --> 00:05:42,350
Jadi, apakah kita semua memiliki kesempatan untuk memanipulasi nilai dari dalam kode kita di sini dan merefleksikan ini kembali ke

84
00:05:42,620 --> 00:05:43,910
input dalam kasus ini?

85
00:05:45,090 --> 00:05:50,550
Dengan itu, kami memiliki skenario manajemen negara lain dan kami sekarang dapat menambahkan tujuan kami sendiri.