Formlar

Preact'teki formlar, React'teki formlar gibi çalışır, tek fark, "statik" (ilk değer) props/atribütleri için destek olmamasıdır.

React Form Belgesi

---

---

Kontrol Edilen ve Kontrol Edilmeyen Bileşenler

React'ın "Kontrol Edilen" Bileşenler ve "Kontrol Edilmeyen" Bileşenler üzerine belgeleri, çift yönlü veri akışına sahip HTML formlarını, genellikle tek yönlü veri akışına sahip Bir Bileşen Tabanlı Sanal DOM oluşturucusu bağlamında nasıl kullanacağınızı anlamak için son derece faydalıdır.

ipucu

Genel olarak, her zaman Kontrol Edilen Bileşenleri kullanmaya çalışmalısınız.

Ancak, bağımsız Bileşenler oluştururken veya üçüncü taraf UI kütüphanelerini sarmalarken, bileşeninizi Preact işlevselliği olmayan bir montaj noktası olarak kullanmak da faydalı olabilir. Bu durumlarda, "Kontrol Edilmeyen" Bileşenler bu görev için oldukça uygundur.

Onay Kutuları ve Radyo Düğmeleri

Onay kutuları ve radyo düğmeleri (``), kontrol edilen formlar oluştururken başlangıçta kafa karışıklığına neden olabilir. Bunun nedeni, kontrol edilmeyen bir ortamda genellikle tarayıcının bir onay kutusunu veya radyo düğmesini "değiştirmesine" veya "işaretlemesine" izin vermemizdir; bir değişim olayı dinleyip yeni değere tepki veririz. Ancak, bu teknik, UI'nın durum ve prop değişikliklerine otomatik olarak yanıt olarak her zaman güncellendiği bir dünya görüşüne iyi geçiş yapmaz.

Aşama Aşama:

Bir onay kutusunda kullanıcı tarafından işaretlendiğinde veya işaretlenmediğinde tetiklenen bir "değişiklik" olayını dinlediğimizi varsayalım. Değişiklik olayı işleyicimizde, onay kutusundan alınan yeni değeri state içinde bir değere ayarlıyoruz. Bunu yaptığımızda, bileşenimizin yeniden oluşturulmasını tetikleyerek, onay kutusunun değerini durumdan aldığımız değere yeniden atarız. Bu gereksizdir, çünkü DOM'dan bir değeri istedik ama sonra istediğimiz değere sahip olacak şekilde tekrar oluşturması için ona söyledik.

— Geliştirici

Bu nedenle, bir değişiklik olayı dinlemek yerine, kullanıcı onay kutusuna veya ilişkili bir `` üzerine her tıkladığında tetiklenen bir tıklama olayını dinlemeliyiz. Onay kutuları sadece Boolean true ve false arasında geçiş yapar; bu yüzden onay kutusuna veya etikete tıkladığımızda, durumumuzda sahip olduğumuz değeri tersine çeviririz ve bu bir yeniden oluşturma tetikler; onay kutusunun görüntülenen değeri istediğimiz değere ayarlanır.

Onay Kutusu Örneği

class MyForm extends Component {
    toggle = e => {
        let checked = !this.state.checked;
        this.setState({ checked });
    };
    render({ }, { checked }) {
        return (
            <label>
                <input
                    type="checkbox"
                    checked={checked}
                    onClick={this.toggle} />
            </label>
        );
    }
}