Saya ingin membaca properti nilai event onClick. Tetapi ketika saya mengkliknya, saya melihat sesuatu seperti ini di konsol:
SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target
Kode saya berfungsi dengan benar. Ketika saya menjalankan saya bisa melihat {column}
tetapi tidak bisa mendapatkannya di acara onClick.
Kode Saya:
var HeaderRows = React.createClass({
handleSort: function(value) {
console.log(value);
},
render: function () {
var that = this;
return(
<tr>
{this.props.defaultColumns.map(function (column) {
return (
<th value={column} onClick={that.handleSort} >{column}</th>
);
})}
{this.props.externalColumns.map(function (column) {
// Multi dimension array - 0 is column name
var externalColumnName = column[0];
return ( <th>{externalColumnName}</th>);
})}
</tr>
);
}
});
Bagaimana saya bisa meneruskan nilai ke onClick
acara di Bereaksi js?
javascript
reactjs
pengguna1924375
sumber
sumber
Jawaban:
Jalan mudah
Gunakan fungsi panah:
Ini akan membuat fungsi baru yang memanggil
handleSort
dengan params yang tepat.Cara yang lebih baik
Ekstrak itu menjadi sub-komponen. Masalah dengan menggunakan fungsi panah dalam panggilan render adalah ia akan membuat fungsi baru setiap kali, yang akhirnya menyebabkan rendering ulang yang tidak dibutuhkan.
Jika Anda membuat sub-komponen, Anda bisa meneruskan handler dan menggunakan props sebagai argumen, yang kemudian akan merender ulang hanya ketika props berubah (karena referensi handler sekarang tidak pernah berubah):
Sub-komponen
Komponen utama
Old Easy Way (ES5)
Gunakan
.bind
untuk melewatkan parameter yang Anda inginkan:sumber
<a>
tag di mana Anda harus melewati acara tersebut, agar dapat menggunakanpreventDefault()
bind
.Ada jawaban yang bagus di sini, dan saya setuju dengan @Austin Greco (opsi kedua dengan komponen terpisah)
Ada cara lain yang saya suka, kari .
Yang dapat Anda lakukan adalah membuat fungsi yang menerima parameter (parameter Anda) dan mengembalikan fungsi lain yang menerima parameter lain (acara klik dalam kasus ini). maka Anda bebas untuk melakukannya dengan apa pun yang Anda inginkan.
ES5:
ES6:
Dan Anda akan menggunakannya dengan cara ini:
Berikut ini adalah contoh lengkap dari penggunaan tersebut:
Tampilkan cuplikan kode
Perhatikan bahwa pendekatan ini tidak menyelesaikan pembuatan instance baru pada setiap render.
Saya suka pendekatan ini daripada penangan inline lainnya karena yang ini lebih ringkas dan mudah dibaca menurut pendapat saya.
Sunting:
Seperti yang disarankan dalam komentar di bawah ini, Anda dapat menyimpan / mem-memo hasil dari fungsi tersebut.
Berikut ini adalah implementasi yang naif:
Tampilkan cuplikan kode
sumber
handleChange = param => cache[param] || (e => { // the function body })
Saat ini, dengan ES6, saya merasa kami bisa menggunakan jawaban yang diperbarui.
Pada dasarnya, (untuk apa pun yang tidak tahu) karena
onClick
mengharapkan fungsi yang diteruskan ke sana,bind
berfungsi karena ia membuat salinan fungsi. Sebagai gantinya, kita dapat meneruskan ekspresi fungsi panah yang hanya memanggil fungsi yang kita inginkan, dan mempertahankannyathis
. Anda seharusnya tidak perlu mengikatrender
metode dalam Bereaksi, tetapi jika karena alasan tertentu Anda kehilanganthis
salah satu metode komponen Anda:sumber
render()
karena ini disebut oleh Bereaksi. Jika ada, Anda harus kebind
penangan acara, dan hanya ketika Anda tidak menggunakan panah.props
kesuper()
atauthis.props
akan terdefinisi selama konstruktor yang bisa membingungkan.foo = () => {...}
dan kemudian merujuk pada render<button onClick={this.foo}...
satu-satunya alasan untuk menyertakan fungsi panah jika Anda menggunakan babel dengan cara ini, IMO, adalah jika Anda ingin menangkap beberapa variabel yang hanya ada dalam ruang lingkup metode render () (peristiwa bisa saja diteruskan dan tidak berlaku).[[h / t ke @ E.Sundin karena menautkan ini dalam komentar]
Jawaban teratas (fungsi anonim atau mengikat) akan berfungsi, tetapi bukan yang paling berkinerja, karena ia membuat salinan pengendali acara untuk setiap instance yang dihasilkan oleh
map()
fungsi.Ini adalah penjelasan tentang cara optimal untuk melakukannya dari ESLint-plugin-react :
sumber
this.state
, Anda dapat dengan aman menukar dengan SFC.Ini pendekatan saya, tidak yakin seberapa buruk itu, silakan komentar
Dalam elemen yang dapat diklik
lalu
sumber
encodeURIComponent(JSON.stringify(myObj))
, maka untuk menguraikannyaJSON.parse(decodeURIComponent(myObj))
,. Untuk fungsi, saya cukup yakin ini tidak akan berfungsi tanpa eval atau Function () baru, yang keduanya harus dihindari. Untuk alasan ini saya tidak menggunakan atribut data untuk meneruskan data di Bereaksi / JS.contoh ini mungkin sedikit berbeda dari milik Anda. tetapi saya dapat meyakinkan Anda bahwa ini adalah solusi terbaik yang dapat Anda miliki untuk masalah ini. Saya telah mencari solusi untuk hari yang tidak memiliki masalah kinerja. dan akhirnya muncul dengan yang satu ini.
MEMPERBARUI
memetikan Anda ingin berurusan dengan objek yang seharusnya menjadi parameter. Anda dapat menggunakannya
JSON.stringify(object)
untuk mengonversinya menjadi string dan menambahkan ke kumpulan data.sumber
sumber
Satu lagi opsi yang tidak melibatkan
.bind
atau ES6 adalah menggunakan komponen anak dengan penangan untuk memanggil penangan induk dengan alat peraga yang diperlukan. Berikut ini contoh (dan tautan ke contoh kerja di bawah):Ide dasarnya adalah untuk komponen induk untuk meneruskan
onClick
fungsi ke komponen anak. Komponen anak memanggilonClick
fungsi dan dapat mengakses setiap yangprops
diteruskan ke sana (danevent
), memungkinkan Anda untuk menggunakanevent
nilai atau alat peraga lainnya dalam fungsi orangtuaonClick
.Berikut ini demo CodePen yang menunjukkan metode ini dalam aksi.
sumber
Melakukan upaya alternatif untuk menjawab pertanyaan OP termasuk panggilan e.preventDefault ():
Tautan yang dirender ( ES6 )
Fungsi Komponen
sumber
Saya menyadari ini cukup terlambat untuk pesta, tetapi saya pikir solusi yang lebih sederhana bisa memuaskan banyak kasus penggunaan:
Saya kira Anda juga bisa menggunakan
data-
atribut.Sederhana, semantik.
sumber
Cukup buat fungsi seperti ini
dan menyebutnya di tempat yang Anda butuhkan
<Ikon onClick = {() => {methodName (theParamsYouwantToPass); }} />
sumber
Anda bisa melakukannya jika sedang menggunakan
ES6
.sumber
Implementing menunjukkan jumlah total dari suatu objek dengan melewatkan jumlah sebagai parameter dari utama ke sub komponen seperti yang dijelaskan di bawah ini.
Inilah MainComponent.js
Dan ini dia
SubComp.js
Cobalah untuk menerapkan di atas dan Anda akan mendapatkan skenario yang tepat bahwa cara melewatkan parameter bekerja di reactjs pada metode DOM apa pun.
sumber
Saya menulis komponen pembungkus yang dapat digunakan kembali untuk tujuan ini yang dibangun berdasarkan jawaban yang diterima di sini. Jika semua yang perlu Anda lakukan adalah meneruskan sebuah string, maka tambahkan saja atribut data dan bacalah dari e.target.dataset (seperti yang disarankan beberapa orang lain). Secara default pembungkus saya akan mengikat ke prop apa pun yang merupakan fungsi dan dimulai dengan 'on' dan secara otomatis meneruskan prop data kembali ke pemanggil setelah semua argumen acara lainnya. Meskipun saya belum mengujinya untuk kinerja, itu akan memberi Anda kesempatan untuk menghindari membuat kelas sendiri, dan itu dapat digunakan seperti ini:
atau untuk Komponen dan fungsi
atau jika Anda suka
nyatakan bahwa Di luar wadah Anda (dekat impor Anda)
Berikut ini adalah penggunaan dalam wadah:
Ini adalah kode wrapper 'withData.js:
sumber
Saya memiliki saran di bawah 3 untuk ini di JSX onClick Events -
Sebenarnya, kita tidak perlu menggunakan fungsi .bind () atau Arrow dalam kode kita. Anda dapat menggunakan sederhana dalam kode Anda.
Anda juga dapat memindahkan onClick event dari th (atau ul) ke tr (atau li) untuk meningkatkan kinerja. Pada dasarnya Anda akan memiliki sejumlah "Pendengar Acara" untuk elemen Anda.
// Dan Anda dapat mengakses
item.id
dalamonItemClick
metode seperti yang ditunjukkan di bawah ini:Saya setuju dengan pendekatan yang disebutkan di atas untuk membuat Komponen Bereaksi terpisah untuk ListItem dan Daftar. Akan tetapi, kode ini terlihat bagus jika Anda memiliki 1000 li, maka 1000 Pendengar Acara akan dibuat. Pastikan Anda tidak memiliki banyak pendengar acara.
sumber
Saya telah menambahkan kode untuk nilai event onclick yang diteruskan ke metode dengan dua cara. 1. menggunakan metode bind 2. menggunakan metode panah (=>). lihat metode handlesort1 dan handlesort
sumber
Di bawah ini adalah contoh yang meneruskan nilai pada acara onClick.
Saya menggunakan sintaks es6. ingat di komponen panah fungsi kelas tidak mengikat secara otomatis, jadi secara eksplisit mengikat konstruktor.
sumber
Saya kira Anda harus mengikat metode ke instance kelas React. Lebih aman menggunakan konstruktor untuk mengikat semua metode dalam Bereaksi. Dalam kasus Anda ketika Anda meneruskan parameter ke metode, parameter pertama digunakan untuk mengikat konteks 'ini' metode, sehingga Anda tidak dapat mengakses nilai di dalam metode.
sumber
sumber
Ada cara yang sangat mudah.
sumber
sumber
Datang entah dari mana ke pertanyaan ini, tetapi saya pikir
.bind
akan melakukan trik. Temukan kode contoh di bawah ini.sumber
Menggunakan fungsi panah:
Anda harus menginstal tahap-2:
npm instal babel-preset-stage-2:
sumber
Ada 3 cara untuk menangani ini: -
Bind metode dalam konstruktor sebagai: -
Gunakan fungsi panah saat membuatnya sebagai: -
Cara ketiga adalah ini: -
sumber
Anda dapat menggunakan kode Anda seperti ini:
Di sini e adalah untuk objek acara, jika Anda ingin menggunakan metode acara seperti
preventDefault()
pada fungsi pegangan Anda atau ingin mendapatkan nilai target atau nama sepertie.target.name
.sumber
Saya menemukan solusi melewati param sebagai atribut tag cukup masuk akal.
Namun memiliki keterbatasan:
Itu sebabnya saya datang dengan perpustakaan ini: react-event-param
Itu:
Contoh penggunaan:
sumber
Ada banyak pertimbangan kinerja, semuanya dalam ruang hampa.
Masalah dengan penangan ini adalah bahwa Anda perlu menjilat mereka untuk memasukkan argumen yang tidak dapat Anda sebutkan dalam props.
Ini berarti bahwa komponen membutuhkan penangan untuk setiap elemen yang dapat diklik. Mari kita sepakat bahwa untuk beberapa tombol ini bukan masalah, kan?
Masalah muncul ketika Anda menangani data tabular dengan puluhan kolom dan ribuan baris. Di sana Anda melihat dampak menciptakan banyak penangan.
Faktanya, saya hanya butuh satu.
Saya mengatur handler di level tabel (atau UL atau OL ...), dan ketika klik terjadi, saya dapat mengetahui sel mana yang diklik menggunakan data yang tersedia sejak di objek acara:
Saya menggunakan bidang tagname untuk memeriksa bahwa klik terjadi pada elemen yang valid, misalnya mengabaikan klik di THs ot footer.
RowIndex dan cellIndex memberikan lokasi yang tepat dari sel yang diklik.
Isi teks adalah teks dari sel yang diklik.
Dengan cara ini saya tidak perlu meneruskan data sel ke pawang, itu bisa swalayan.
Jika saya membutuhkan lebih banyak data, data yang tidak dapat ditampilkan, saya dapat menggunakan atribut dataset, atau elemen tersembunyi.
Dengan beberapa navigasi DOM sederhana semuanya ada di tangan.
Ini telah digunakan dalam HTML sejak itu, karena PC jauh lebih mudah untuk rawa.
sumber
Ada beberapa cara untuk melewatkan parameter di penangan acara, beberapa mengikuti.
Anda dapat menggunakan fungsi panah untuk membungkus pengatur kejadian dan meneruskan parameter:
contoh di atas setara dengan panggilan
.bind
atau Anda dapat secara eksplisit memanggil bind.Terlepas dari dua pendekatan ini, Anda juga bisa meneruskan argumen ke fungsi yang didefinisikan sebagai fungsi kari.
sumber
Gunakan penutup , itu menghasilkan solusi bersih:
<th onClick={this.handleSort(column)} >{column}</th>
Fungsi handleSort akan mengembalikan fungsi yang sudah ditetapkan kolom nilai .
Fungsi anonim akan dipanggil dengan nilai yang benar ketika pengguna mengklik th.
Contoh: https://stackblitz.com/edit/react-pass-parameters-example
sumber
Diperlukan perubahan sederhana:
Menggunakan
<th value={column} onClick={that.handleSort} >{column}</th>
dari pada
<th value={column} onClick={that.handleSort} >{column}</th>
sumber