React Tutorial, Bagian 16: Fase Keempat Bekerja pada Aplikasi TODO, Pemrosesan Acara

Pada bagian hari ini dari menerjemahkan tutorial Bereaksi, kami akan terus bekerja pada aplikasi Todo dan berbicara tentang bagaimana Bereaksi menangani peristiwa.



→ Bagian 1: ikhtisar kursus, alasan popularitas React, ReactDOM dan JSX
→ Bagian 2: komponen fungsional
→ Bagian 3: file komponen, struktur proyek
→ Bagian 4: komponen induk dan anak
→ Bagian 5: mulai bekerja pada aplikasi TODO, dasar-dasar gaya
→ Bagian 6: tentang beberapa fitur kursus, JSX dan JavaScript
→ Bagian 7: gaya inline
→ Bagian 8: terus bekerja pada aplikasi TODO, terbiasa dengan sifat-sifat komponen
→ Bagian 9: properti komponen
→ Bagian 10: Workshop bekerja dengan properti komponen dan gaya
→ Bagian 11: pembuatan markup dinamis dan metode susunan peta
→ Bagian 12: lokakarya, pekerjaan tahap ketiga pada aplikasi TODO
→ Bagian 13: komponen berbasis kelas
→ Bagian 14: lokakarya tentang komponen berbasis kelas, status komponen
→ Bagian 15: bengkel kesehatan komponen
→ Bagian 16: tahap keempat dari pengerjaan aplikasi TODO, penanganan acara
→ Bagian 17: tahap kelima bekerja pada aplikasi TODO, memodifikasi status komponen
→ Bagian 18: tahap keenam dari pengerjaan aplikasi TODO
→ Bagian 19: metode siklus hidup komponen
Bagian 20: pelajaran pertama dalam rendering bersyarat
→ Bagian 21: pelajaran kedua dan lokakarya tentang rendering bersyarat
→ Bagian 22: tahap ketujuh bekerja pada aplikasi TODO, mengunduh data dari sumber eksternal
→ Bagian 23: pelajaran pertama tentang bekerja dengan formulir
→ Bagian 24: Pelajaran Bentuk Kedua
→ Bagian 25: Workshop bekerja dengan formulir
→ Bagian 26: arsitektur aplikasi, pola Container / Komponen
→ Bagian 27: proyek kursus

Pelajaran 29. Workshop. Aplikasi TODO. Tahap nomor 4

→ Asli

▍ pekerjaan

Terakhir kali, kami mengunduh daftar tugas untuk aplikasi dari file JSON, dan kemudian, berjalan melalui array yang dihasilkan, kami membentuk, menggunakan metode map() , seperangkat komponen. Kami ingin memodifikasi data ini. Dan kita hanya bisa melakukan ini jika kita memuatnya ke dalam komponen.

Tugas hari ini adalah bagi Anda untuk mengubah komponen App menjadi komponen keadaan dan memuat data kasus yang diimpor ke status komponen itu.

OlSolusi

Ingat kode komponen App sudah ada dalam proyek kami:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

Agar dapat memodifikasi data dari daftar yang harus dilakukan, kita perlu memasukkan apa yang sekarang disimpan di todosData ke dalam status komponen App .

Untuk mengatasi masalah ini, pertama-tama kita harus mengubah komponen fungsional App menjadi komponen berdasarkan kelas. Maka kita perlu memuat data dari todosData ke dalam status dan, membentuk daftar komponen TodoItem , memotong bukan array todosData , tetapi array dengan data yang sama disimpan di negara. Begini tampilannya:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" class App extends React.Component {   constructor() {       super()       this.state = {           todos: todosData       }   }     render() {       const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item}/>)             return (           <div className="todo-list">               {todoItems}           </div>       )   } } export default App 

Perlu dicatat bahwa setelah semua transformasi ini, tampilan aplikasi tidak berubah, tetapi setelah menyelesaikannya, kami menyiapkannya untuk pengerjaan lebih lanjut.

Pelajaran 30. Menangani Acara dalam Bereaksi

→ Asli

Penanganan acara adalah yang mendorong aplikasi web dan yang membedakannya dari situs web statis sederhana. Penanganan acara di Bereaksi cukup sederhana, sangat mirip dengan bagaimana acara diproses dalam HTML biasa. Jadi, misalnya, dalam Bereaksi ada penangan event onClick dan onSubmit , yang mirip dengan mekanisme HTML serupa yang disajikan dalam bentuk onclick dan onsubmit , tidak hanya dalam hal nama (dalam Bereaksi, bagaimanapun, nama-nama mereka dibentuk menggunakan gaya unta), tetapi juga di bagaimana tepatnya mereka bekerja dengan mereka.

Di sini kita akan mempertimbangkan contoh, bereksperimen dengan aplikasi standar yang dibuat menggunakan create-react-app , yang file komponen App berisi kode berikut:

 import React from "react" function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button>Click me</button>       </div>   ) } export default App 

Seperti inilah tampilan aplikasi kita di browser.


Halaman aplikasi di browser

Sebelum kita dapat secara serius berbicara tentang memodifikasi status komponen menggunakan metode setState() , kita perlu berurusan dengan peristiwa dan penanganan peristiwa di Bereaksi. Mekanisme pemrosesan peristiwa memungkinkan pengguna aplikasi untuk berinteraksi dengannya. Aplikasi dapat merespons, misalnya, untuk click atau hover peristiwa, melakukan tindakan tertentu saat peristiwa ini terjadi.

Penanganan acara di Bereaksi sebenarnya cukup mudah. Jika Anda terbiasa dengan mekanisme HTML standar yang digunakan untuk menetapkan pengendali event ke kontrol, seperti pengendali event onclick , maka Anda akan segera melihat kesamaan dengan mekanisme yang ditawarkan React kepada kami.

Misalnya, untuk membuatnya menjadi mungkin melalui HTML yang dengan mengklik tombol tertentu fungsi dilakukan, Anda dapat menggunakan konstruksi ini (asalkan fungsi ini ada dan dapat diakses):

 <button onclick="myFunction()">Click me</button> 

Di Bereaksi, seperti yang telah disebutkan, penangan acara memiliki nama yang disusun sesuai dengan aturan gaya unta, yaitu, onclick akan berubah menjadi onclick sini. Hal yang sama berlaku untuk onMouseOver event onMouseOver , dan untuk penangan lainnya. Alasan untuk perubahan ini adalah karena ia menggunakan pendekatan penamaan entitas yang umum untuk JavaScript.

Sekarang mari kita bekerja dengan kode kita dan membuat tombol merespons klik di atasnya. Alih-alih meneruskan kode ke pawang untuk memanggil fungsi sebagai string, kami meneruskan nama fungsi dalam kurung kurawal. Pengadaan fragmen yang sesuai dari kode kami sekarang akan terlihat seperti ini:

 <button onClick={}>Click me</button> 

Jika Anda melihat kode komponen App yang kami gunakan dalam contoh ini, Anda akan melihat bahwa belum ada fungsi yang akan Anda panggil ketika tombol diklik. Secara umum, saat ini kita bisa bertahan dengan fungsi anonim yang dideklarasikan langsung dalam kode yang menggambarkan tombol. Begini tampilannya:

 <button onClick={() => console.log("I was clicked!")}>Click me</button> 

Sekarang ketika Anda mengklik tombol, teks I was clicked! .

Efek yang sama dapat dicapai dengan mendeklarasikan fungsi independen dan membawa kode file komponen ke formulir berikut:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

Untuk daftar lengkap acara yang didukung oleh React, lihat halaman dokumentasi ini .

Sekarang coba lengkapi aplikasi kita dengan fitur baru. Yaitu, pastikan bahwa ketika Anda membawa gambar di konsol, pesan ditampilkan. Untuk melakukan ini, Anda perlu menemukan acara yang sesuai dalam dokumentasi dan mengatur prosesnya.

Bahkan, masalah ini dapat diselesaikan dengan berbagai cara, kami akan menunjukkan solusinya berdasarkan pada event onMouseOver . Ketika acara ini terjadi, kami akan menampilkan pesan di konsol. Beginilah kode kami sekarang akan terlihat seperti:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img onMouseOver={() => console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

Pemrosesan acara memberi peluang besar kepada programmer, yang, tentu saja, tidak terbatas pada mengirimkan pesan ke konsol. Di masa depan, kita akan berbicara tentang bagaimana pemrosesan acara, dikombinasikan dengan kemampuan untuk mengubah keadaan komponen, akan memungkinkan aplikasi kita untuk menyelesaikan tugas yang diberikan kepada mereka.

Seperti biasa - kami sarankan meluangkan waktu untuk bereksperimen dengan apa yang Anda pelajari hari ini.

Ringkasan

Hari ini Anda melakukan sedikit pekerjaan langsung yang meletakkan dasar bagi perubahan besar pada aplikasi Todo dan membiasakan diri dengan mekanisme penanganan acara di Bereaksi. Lain kali Anda akan ditawari lokakarya lain dan topik baru akan disajikan.

Pembaca yang budiman! Jika Anda, setelah membiasakan diri dengan metodologi pemrosesan acara di Bereaksi, bereksperimen dengan apa yang Anda pelajari, silakan beri tahu kami tentang hal itu.