Bereaksi mengabaikan atribut 'untuk' elemen label

250

Di Bereaksi (kerangka kerja Facebook), saya perlu membuat elemen label terikat ke input teks menggunakan foratribut standar .

misalnya JSX berikut digunakan:

<label for="test">Test</label>
<input type="text" id="test" />

Namun, ini menghasilkan HTML yang tidak memiliki foratribut yang diperlukan (dan standar) :

<label>Test</label>
<input type="text" id="test">

Apa yang saya lakukan salah?

reactjs label goofballLogic
sumber

Jawaban:

484

The foratribut disebut htmlForuntuk konsistensi dengan API properti DOM. Jika Anda menggunakan build pengembangan React, Anda seharusnya melihat peringatan di konsol Anda tentang ini.

Sophie Alpert
sumber
4
Ben terima kasih. Bisakah Anda menjelaskan "untuk konsistensi dengan DOM API" untuk saya?
goofballLogic
17
Jika Anda memiliki labelunsur (seperti dikembalikan oleh document.createElement, document.getElementById, dll) Anda akan mengakses nya forproperti sebagai label.htmlFor.
Sophie Alpert
3
@Meglio Dalam HTML Anda memerlukan ID agar atribut for berfungsi. Untuk membuat komponen Anda dapat digunakan kembali, Anda bisa menambahkan properti nama ke komponen yang Anda tetapkan sebagai ID dan sebagai atribut nama pada bidang input aktual.
Wim Mostmans
2
Namun, saya menemukan jawabannya di sini . Mereka mengatakan untuk menggunakan generator ID.
Tobia
2
@BenAlpert Terima kasih telah menjelaskan hal itu. Saya tidak pernah melihat DOM API karena jQuery dan yang lainnya (tolong maafkan saya). Tetapi jika ada orang lain yang tertarik untuk mempelajari lebih lanjut tentang itu, periksa developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement .
alvincrespo
13

Untuk Bereaksi, Anda harus menggunakannya per kata kunci untuk mendefinisikan atribut html.

class -> className

digunakan dan

for -> htmlFor

digunakan, karena reaksi adalah case sensitif pastikan Anda harus mengikuti modal kecil dan sesuai kebutuhan.

Jani Devang
sumber
3

keduanya fordan classkata-kata yang dicadangkan dalam JavaScript ini adalah mengapa ketika datang ke atribut HTML di JSX Anda perlu menggunakan sesuatu yang lain, tim Bereaksi memutuskan untuk menggunakan htmlFordan classNamemasing - masing

Trident D'Gao
sumber
1
Sama sekali tidak ada hubungannya dengan itu. Transformasi JSX hanya bisa menerjemahkannya ke 'kelas' yang juga berlaku untuk nama properti. Bahkan, dalam Preact, Anda bisa menggunakan class dan className.
Malte R
3
Sementara Bereaksi bisa mengubahnya di JSX, itu tidak. Dokumen mereka (per 25-Mar-2020) menyatakan "Karena foradalah kata yang dilindungi undang-undang dalam JavaScript, Bereaksi elemen yang akan digunakan htmlFor.": Reactjs.org/docs/dom-elements.html#htmlfor
nirvdrum
@ MalteR Anda bisa kirim ke IE8, IE7 dan IE6
Trident D'Gao
0

Itu adalah htmlFor di JSX dan class adalah className di JSX

Daniel Nguyen
sumber