React’te form öğeleri, kullanıcıların veri girmesini ve bu verilerin işlenmesini sağlar. React’te form öğeleri, HTML formları gibi davranır, ancak React kullanarak dinamik olarak değişebilir.

React'te Form Öğeleriyle Nasıl Çalışılır?

Form öğeleri, state ve props objelerini kullanarak yapılandırılır. state, formun mevcut durumunu saklar ve bu duruma göre görüntülenir. props, formun mevcut değerlerini alır ve bu değerlere göre görüntülenir.

React’te form öğeleri için onChange ve onSubmit gibi fonksiyonlar kullanılır. onChange fonksiyonu, form öğesindeki değer değiştiğinde çalışır ve bu değişimi state objesine kaydeder. onSubmit fonksiyonu ise formun submit edildiğinde çalışır ve form verilerinin işlenmesini sağlar.

Aşağıdaki örnek, React’te nasıl bir form oluşturulabileceğini gösterir:

import React, { useState } from "react"; function FormExample() { const [formData, setFormData] = useState({ name: "", email: "", message: "", }); const handleChange = (event) => { setFormData({ ...formData, [event.target.name]: event.target.value, }); }; const handleSubmit = (event) => { event.preventDefault(); console.log("Form verileri: ", formData); }; return ( <form onSubmit={handleSubmit}> <label> Ad: <input type="text" name="name" value={formData.name} onChange={handleChange} /> </label> <br /> <label> Email: <input type="email" name="email" value={formData.email} onChange={handleChange} /> </label> <br /> <label> Mesaj: <textarea name="message" value={formData.message} onChange={handleChange} /> </label> <br /> <button type="submit">Gönder</button> </form> ); } export default FormExample;

Bu örnekte, form öğeleri için state objesi oluşturulur ve handleChange fonksiyonu form öğesindeki değer değiştiğinde State objesi, React uygulamasında dinamik verilerin tutulduğu bir veri yapısıdır. Form öğelerinin değerlerini içermelidir ve handleChange fonksiyonu bu değerleri güncellemelidir. handleChange fonksiyonu, form öğesindeki değer değiştiğinde çağrılır ve state objesini günceller. Aşağıdaki örnekte, form öğesi olan bir “ad” alanı için state objesi oluşturulur ve handleChange fonksiyonu tanımlanır.
class FormExample extends React.Component { constructor(props) { super(props); this.state = { ad: "" }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ ad: event.target.value }); } render() { return ( <form> <label> Ad: <input type="text" value={this.state.ad} onChange={this.handleChange} /> </label> </form> ); } }

Bu örnekte, state objesi oluşturuldu ve handleChange fonksiyonu tanımlandı. handleChange fonksiyonu, form öğesindeki değer değiştiğinde çağrılır ve state objesi güncellenir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir