Bereaksi Tutorial Bagian 18: Fase Keenam Bekerja pada Aplikasi TODO

Di bagian terjemahan React tutorial hari ini, Anda diundang untuk terus bekerja pada aplikasi Todo dan memastikan bahwa mengklik pada flag mempengaruhi kondisi komponen.



→ 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 33. Workshop. Aplikasi TODO. Tahap nomor 6

→ Asli

▍ pekerjaan

Dalam pelajaran praktis ini, kami akan terus bekerja pada aplikasi Todo dan memastikan bahwa tindakan pengguna mempengaruhi keadaan komponen. Ini adalah tentang memungkinkan kami menandai item pada daftar yang harus dilakukan sebagai selesai atau tidak selesai. Di bawah ini adalah kode komponen App , beberapa benda kerja dan komentar yang tersedia di mana dirancang untuk membantu Anda menyelesaikan tugas. Faktanya, inilah yang diundang untuk Anda lakukan hari ini:

1. Buat event handler di komponen App yang merespons perubahan flag (kita berbicara tentang event onChange ) dan mengubah keadaan aplikasi. Mungkin ini adalah bagian paling sulit dari tugas hari ini. Untuk mengatasinya - perhatikan komentar dan kosong yang disediakan dalam kode.
2. Lewati metode yang sesuai ke komponen TodoItem .
3. Di komponen TodoItem buat mekanisme yang, ketika peristiwa onChange , memanggil metode yang diteruskan ke instance komponen dan meneruskannya pengenal kasus ( id ), yang sesuai dengan bendera yang diklik pengguna.

Berikut adalah kode untuk komponen App :

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

OlSolusi

Untuk memulai, buat mekanisme sederhana untuk memeriksa panggilan ke metode handleChange() . Yaitu, kami membawanya ke formulir ini:

 handleChange(id) {   console.log("Changed", id) } 

Sekarang kami menerapkan apa yang perlu dilakukan sesuai dengan paragraf 2 dan 3 penugasan. Artinya, kita akan membuat koneksi antara mengklik pada flag dan memanggil metode handleChange() dengan meneruskan id flag ini padanya.

Untuk meneruskan referensi ke handleChange() ke handleChange() komponen handleChange() , kita bisa melakukan hal yang sama dengan melewatkan properti padanya dan menulis ulang kode untuk membuat daftar komponen seperti ini:

 const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>) 

Perhatikan bahwa properti handleChange , yang akan tersedia untuk komponen TodoItem , berisi referensi ke metode handleChange dari instance komponen App . Dalam komponen TodoItem , metode ini dapat diakses dengan cara yang sama seperti properti lain yang diteruskan ke sana. Pada tahap ini, kode TodoItem terlihat seperti ini:

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => console.log("Changed!")}           />           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

Untuk memanggil metode handleChange dalam kode komponen, Anda bisa menggunakan konstruk form props.handleChange() . Dalam hal ini, metode ini harus melewati id elemen. onChange event onChange menerima objek event. Kita tidak perlu objek ini untuk memanggil metode handleChange() . Kami menulis ulang kode tempat kami menetapkan pengendali event onChange ke elemen, sebagai berikut:

 onChange={(event) => props.handleChange(props.item.id)} 

Di sini kita memanggil metode handleChange() , meneruskannya pengidentifikasi elemen yang diambil dari properti yang diteruskan ke sana, dari fungsi lain yang menerima objek acara. Karena kita tidak menggunakan objek ini di sini, kode dapat ditulis ulang seperti ini:

 onChange={() => props.handleChange(props.item.id)} 

Sekarang cobalah untuk menjalankan aplikasi dan, membuka konsol, klik pada kotak centang.


Menguji metode handleChange ()

Pesan yang berisi pengidentifikasi bendera yang kami klik masuk ke konsol. Tetapi flag-flag tersebut belum mengubah tampilan, karena metode handleChange() belum menerapkan mekanisme untuk mengubah status komponen. Sebagai hasilnya, kami baru saja menangani bagian kedua dan ketiga dari penugasan ini, dan sekarang kami dapat mulai mengerjakan bagian pertamanya, mungkin yang paling menarik dari semuanya, tentang bekerja dengan negara.

Untuk memulainya, kita perlu menyelesaikan masalah berkenaan dengan keadaan bahwa array disimpan dalam keadaan, elemen yang, sebagai tanggapan terhadap klik pada bendera, harus mengalami perubahan, tetapi kita tidak boleh memodifikasi array yang disimpan dalam versi lama negara. Misalnya, Anda tidak bisa hanya berjalan melalui array objek yang sudah dalam keadaan, menemukan elemen yang diperlukan dan mengubah properti yang sudah completed . Kita perlu bahwa, setelah mengubah keadaan, array baru akan terbentuk, salah satu elemen yang akan diubah, dan sisanya akan tetap sama seperti sebelumnya. Salah satu pendekatan untuk pembentukan array seperti itu adalah penggunaan metode map() array, yang disebutkan dalam komentar untuk tugas tersebut. Kami akan menulis kode dalam metode setState() . Mari kita handleChange() kode metode handleChange() dari komponen App ke formulir berikut:

 handleChange(id) {   this.setState(prevState => {         }) } 

Sekarang, dengan menggunakan metode map() , kita akan pergi melalui array prevState.todos dan mencari elemen yang kita butuhkan di dalamnya, yaitu, yang id nya dilewatkan ke metode handleChange() , dan kemudian mengubah propertinya yang completed . Metode map() mengembalikan array baru, yang akan digunakan dalam keadaan baru aplikasi, jadi kita akan menulis array ini ke konstanta. Begini tampilannya:

 handleChange(id) {   this.setState(prevState => {       const updatedTodos = prevState.todos.map(todo => {           if (todo.id === id) {               todo.completed = !todo.completed           }           return todo       })       return {           todos: updatedTodos       }   }) } 

Di sini, selama pemrosesan array menggunakan map() , jika elemen yang handleChange() sama dengan id diteruskan ke metode handleChange() , nilai properti yang completed dari elemen ini dibalik ( true to false dan sebaliknya). Setelah itu, terlepas dari apakah elemen telah diubah, map() mengembalikan elemen itu. Itu jatuh ke array baru (diwakili oleh konstanta updatedTodos ) di bawah indeks yang sama di mana elemen yang sesuai berada di array todos dari versi negara sebelumnya. Setelah seluruh array dipindai dan array updatedTodos sepenuhnya terbentuk, array ini digunakan sebagai nilai properti todos objek yang dikembalikan oleh metode setState() , yang merupakan versi baru dari state.

Jika Anda memulai aplikasi sekarang, Anda mungkin menemukan bahwa flag merespons efek kami. Ini menunjukkan bahwa mengklik pada mereka mengubah keadaan aplikasi, setelah itu mereka di-render menggunakan data baru.

Ringkasan

Hari ini, kami memiliki aplikasi Todo yang berfungsi, ketika menulis yang kami gunakan banyak konsep Bereaksi yang kami pelajari. Bahkan, masih sangat mungkin untuk memperbaikinya, khususnya, untuk menyesuaikan dgn mode dan memperluas kemampuannya. Kami akan kembali kepadanya di salah satu kelas berikut.

Pembaca yang budiman! Apakah Anda mengatasi pekerjaan praktis hari ini?