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.
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;
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> ); } }