Saya memiliki objek yang disimpan dalam status saya (item kerja) dengan atribut yang berbeda seperti id, judul, deskripsi, dll. Saya memetakannya dalam render saya di tabel untuk membuatnya terlihat. Sejauh ini bagus. Tetapi ketika saya mencoba untuk mengiklankan "onClick" di dalam fungsi peta, itu tidak hanya akan memicu elemen tertentu yang diklik, tetapi semua objek item kerja di peta juga akan memicu.

Dalam render saya;

{workitem.company ? workitem.company + " - " : ""}

      <a href={workitem.url} target="_blank">{workitem.title}</a>
      <div className="description pt-2" onClick=  {this.descriptionPopOut(workitem.description)>  // My onclick function                            
           <strong>Description: </strong>                                         
           {workitem.description ? this.trimWord(workitem.description.replace("...", ""), 850, "...")
                                  : ""}{" "}
                                  ...
      </div>

OnClick akan mengarah ke fungsi yang sangat sederhana yang memiliki peringatan, dan mengambil deskripsi objek sebagai input.

descriptionPopOut = (description) => {
   alert(description); 
}

Di atas akan membuat peringatan muncul dengan semua properti deskripsi objek, dan bukan untuk elemen tertentu yang telah diklik. Apakah ada cara untuk menyelesaikan ini?

0
Arte 28 Oktober 2019, 10:39

3 jawaban

Jawaban Terbaik

Itu karena pada setiap render, fungsi Anda memanggil yaitu

this.descriptionPopOut(workitem.description)

. Saat Anda ingin menelepon saat Anda mengklik. Anda dapat mengikat fungsi tersebut sehingga Anda dapat menggunakannya nanti saat Anda mengklik :

this.descriptionPopOut.bind(this, workitem.description) 

Atau Anda dapat menggunakan fungsi panah gemuk untuk mengembalikan fungsi, mis

onClick = {() => this.descriptionPopOut(workitem.description)> 

(Ini memastikan itu membuat referensi fungsi dan ketika Anda mengkliknya, itu memanggil fungsi Anda dengan param tertentu)

1
Shubham Verma 28 Oktober 2019, 07:58

Masalahnya adalah Anda salah memanggil fungsi Anda.

Jangan lakukan ini onClick = {this.descriptionPopOut(workitem.description)>

Karena Anda ingin memberikan parameter, lakukan ini

onClick = {() => this.descriptionPopOut(workitem.description)>

1
Atin Singh 28 Oktober 2019, 07:50

Anda memanggil fungsi di setiap iterasi.

Coba lakukan seperti ini:

this.descriptionPopOut.bind(this, workitem.description)
1
dmitri7 28 Oktober 2019, 07:50