Controlled Components Nedir, Nasıl Kullanılır? Controlled Components Hakkında Herşey Milyonlarca kişi merakla Controlled Components Uygulaması Nedir kelimesinin ne anlama geldiğini araştırdı.

ReactJ’leri bir süredir kullanıyorsanız, kontrol edilmeyen bileşenler hakkında bazı uyarılar görmüş ve durumları kullananları ele almak için geri dönmüş olmalısınız. Bu yazıda, Controlled Components hakkında her şeyi öğreneceğiz.

Son zamanlarda internet ortamında milyonlarca kişinin araştırdığı kelimelerde birisi Controlled Components kelimesi oldu. Peki Controlled Components Nedir, Ne Anlama Geliyor? hemen öğrenelim.

Controlled Components Nedir?

React’te, Controlled Components, form verilerinin bileşenin durumu tarafından işlendiği bileşenlerdir. Mevcut değerini proplar aracılığıyla alır ve onClick, onChange, vb. gibi geri aramalar aracılığıyla değişiklikler yapar. Bir ana bileşen kendi durumunu yönetir ve yeni değerleri props olarak kontrol edilen bileşene iletir.

Formdaki öğeler, textarea gibi yazılanlardır. girdi veya radyo düğmeleri veya onay kutuları gibi seçili olanı, herhangi bir değişiklik olduğunda, durumu da güncelleyen bazı işlevler aracılığıyla buna göre güncellenir.

Örnek

İşte bir metin girişine sahip olduğumuz Controlled Components çalışma kodu.

import React, { Component } from "react";

class ControlledComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: ""
    };
  }
  render() {
    return (
      <div>
        <form>
          <div>
            <label>Controlled Input </label>
            <input
              type="number"
              name="sentence"
              onChange={(event) => {
                this.setState({
                  text: event.target.value,
                });
              }}
              value={this.state.text}
            />
          </div>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}
export default ControlledComponent;

Bu örnekten kontrollü bileşenlerin en önemli iki yönünü anlayalım —

1. Metin girişi, bileşenlerin durumu ‘text’ olarak ayarlanmış değer özelliğine sahiptir . Bu, girdi bileşeninin değerinin her zaman bileşen durumu ‘metnin’ değeriyle senkronize olması için çok önemlidir .
2. İkinci olarak, bir kullanıcı giriş öğesinin değerini güncellemeye çalıştığında giriş öğesi tarafından yayılan change olayını ele alıyoruz. İşleyici işlevinin içinde , güncellenmiş giriş değeriyle ‘metin’ durumunu değiştiriyoruz.

Şimdi durum değiştikçe, giriş öğesinin güncellenmiş değerle yeniden oluşturulmasını gerektirir. Böylece kullanıcı tarafından yapılan değişiklikler kullanıcı arayüzüne de yansıyacaktır.

Hızlı İpucu : Bir girişi değiştirerek bir görünümü güncellemeniz gerekiyorsa (örneğin ileriye dönük arama özelliği), kontrollü bir giriş kullanmak çok zaman kazandıracak ve daha temiz bir kod sağlayacaktır.