React Dinamik Seçim Menüsü

İlk önce basit bir React select açılır menü kutusu oluşturacağım. Ardından, dinamik hale getirmek için yeniden düzenleyin.

Başlamak için, uygulamanın bulunacağı yere cd yazın ve ardından React uygulamanızı oluşturacak olan aşağıdaki komutu kullanın (adın uygulamanızın adıyla değiştirilmesi):

npx oluştur-tepki-uygulama adı

Ardından uygulamanıza cd:

cd adı

Uygulamanızı tarayıcıda açmak için aşağıdaki komutu çalıştırın:

npm başlangıç

Tarayıcınızda dönen React logosunu görmelisiniz. Uygulama dizininin içinde App.js dosyasına gidin. Logoyu görüntülemekten sorumlu bir resim etiketi içeren bir başlık etiketi, Düzenleme metni içeren bir paragraf etiketi ve sizi React web sitesine aktarmak için Learn React metnini tıklanabilir yapan bir bağlantı etiketi vardır.

Seçim kutusunu resim etiketinin üstündeki başlık etiketinin içine koyacağım. Menümde farklı yüzme stillerinden bir seçki sunmak istiyorum, bu yüzden ilk olarak:

Bir yüzme stili seçin:

Bir seçim kutusu oluşturmak için seçim etiketini kullanın:

<seç></seç>

Şimdi, seçim etiketinin içindeki seçenek etiketlerini listeleyerek, seçim etiketini farklı seçimlerle (seçenekler olarak da bilinir) doldurun. Seçeneklerimin serbest stil, sırtüstü ve kelebek içermesini istiyorum:

App.js dosyasını kaydedin. Tarayıcı şimdi ilk görünür seçenek olarak serbest stilde bir seçim kutusu görüntüler:

Diğer seçenekleri ortaya çıkarmak için aşağı oku tıklayın.

Seçim kutunuzun otomatik olarak bir seçenek göstermesini istemiyorsanız, seçenekler listesinin en üstüne boş bir seçenek etiketi ekleyebilirsiniz:

Bu, select etiketinin içindeki sabit kodlanmış stiller listesidir. Şimdi, seçme etiketini seçeneklerle dinamik olarak doldurmak için kodlanmış listeyi yeniden düzenlemek için. Uygulama işlevinin hemen içinde, ancak oluşturmanın dışında, yüzme stillerini içeren bir dizi oluşturun ve onu değişken stillere atayın:

const stilleri = [“serbest stil”, “sırtüstü”, “kelebek”]

Ardından, her stil için bir seçenek oluşturmak üzere stilleri eşleyin ve bunu optionsStyles değişkenine atayın:

const seçenekStyles = style.map((style) =>

<option>{style}</option>

);

Şimdi serbest stil, sırtüstü ve kelebek için üç seçenek etiketini tek seçenek Stilleri ile değiştirin:

Stiller dizinize başka bir stil ekleyerek ve ardından dosyayı kaydederek test edin. Ek stili, seçim kutunuza bir seçenek olarak dinamik olarak ekleyecektir.

const stilleri = [“serbest stil”, “sırtüstü”, “kelebek”, “yan vuruş”]