Halo Saya sedang membuat tabel dengan .map begini tampilannya:

enter image description here

Saya bereksperimen dengan kotak centang Saya ingin mengirim semua data itu ke bagian lain dari kode yang sedang saya kerjakan melakukan beberapa upaya dengan input type = 'checkbox' dan gagal dan melihat beberapa tutorial dengan Material UI Checkbox dan memutuskan untuk menggunakan yang satu menyebabkan tampaknya lebih dapat diandalkan.

Sekarang pertanyaan saya adalah: Bagaimana cara mencentang kotak satu per satu, ketika saya mencentang satu kotak centang semuanya. Saya tahu saya mengirim parameter yang benar karena data yang saya dapatkan adalah yang benar, Contoh:

enter image description here

UID benar, itu salah yang berarti benar (karena kode belum berfungsi) dan akhirnya adalah yang pertama (indeks 0) yang berarti mengambil semua parameter yang benar, ini adalah tampilannya di database yang dapat Anda lihat mengambil UID yang tepat, dll.

enter image description here

Jika saya menghapus ketentuan kode saya, itu juga berfungsi, ini tampilannya (saya mengklik keduanya): masukkan deskripsi gambar di sini

0
ReactPotato 22 September 2021, 08:17

2 jawaban

Jawaban Terbaik

Karena Anda memiliki larik data tempat Anda mendorong "estudiante.uid". Anda dapat menggunakan array ini sebagai kondisi. Misalnya untuk mencentang kotak saat siswa ditambahkan dan tidak dicentang saat dihapus. Saya dapat melihat Anda memiliki data itu di negara bagian, jadi:

const [studentID, setStudentID] = useState([])

const setStudent = (estudiante, index) => {     
if(!studentID.find(id => id === estudiante){
     setStudentID([ ... studentID, estudiante]); // adds a student id
     // let data = studentID; //This can go
     // data.push(estudiante); //This can go 
     console.log("Hi I'm True")
     console.log(estudiante, check, index)
  }  
   else {
    setStudentID(studentID.filter(studentId => studentId !== estudiante)) 
    //deletes a student id
    console.log("Hi I'm False")
       console.log(estudiante, check, index)
    }  
}

//Map
<tbody>
  {estudiantes.map((estudiante, index) => (
  <tr>
  
  <td>
  <Checkbox
  checked={studentID.find( id => id === estudiante.uid)}
  color = "primary"
  id = "checkBox"
  onChange = {() => setStudent(estudiante.uid, index)}
  inputProps={{ 'aria-label': 'controlled' }}
  />
  </td>

  <td>{estudiante.name}</td>
  <td>{estudiante.school}</td>
  <td>{estudiante.grade}</td>

  <td>
  <Button 
   startIcon = {<DeleteIcon />}
   size = "medium"
   variant = "contained"
   color = "secondary"
   onClick = { ()=>{deleteProduct(estudiante.uid)}}>
   Borrar
   </Button>
   </td>

   </tr>
   ))}
 </tbody>
1
Julio Lopez 22 September 2021, 13:20

Oke itu intinya, Anda membuat status yang dicentang sebagai boolean, itu berarti bahwa semua elemen dari array yang dipetakan akan mewarisi status boolean itu, jadi ketika status berubah menjadi true, semua elemen akan memiliki status yang dicentang menjadi true. Jika Anda ingin menangani beberapa kotak centang, Anda harus menginisialisasi status yang dicentang sebagai array dengan jumlah elemen yang sama dengan array estudiantes seperti yang Anda lakukan dengan studentId.

Postingan ini menjelaskannya dengan baik https:// www.freecodecamp.org/news/how-to-work-with-multiple-checkboxes-in-react/

0
Nacho 22 September 2021, 05:51