Tepki Formları
Tıpkı HTML'de olduğu gibi, React, kullanıcıların web sayfasıyla etkileşime girmesine izin vermek için formları kullanır.
React'te Form Ekleme
Diğer öğeler gibi React ile bir form eklersiniz:
Örnek:
Kullanıcıların adlarını girmelerine olanak tanıyan bir form ekleyin:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Bu normal şekilde çalışacak, form gönderilecek ve sayfa yenilenecektir.
Ancak bu genellikle React'te olmasını istediğimiz şey değildir.
Bu varsayılan davranışı önlemek ve React'in formu kontrol etmesine izin vermek istiyoruz.
İşleme Formları
Formları işleme, değeri değiştirdiğinde veya gönderildiğinde verileri nasıl ele aldığınızla ilgilidir.
HTML'de form verileri genellikle DOM tarafından işlenir.
React'te form verileri genellikle bileşenler tarafından işlenir.
Veriler bileşenler tarafından işlendiğinde, tüm veriler bileşen durumunda saklanır.
onChangeÖzniteliğe olay işleyicileri ekleyerek değişiklikleri kontrol edebilirsiniz
.
useStateHer bir girdi değerini takip etmek ve tüm uygulama için "tek bir doğruluk kaynağı" sağlamak için Hook'u kullanabiliriz .
Kancalar hakkında daha fazla bilgi için Tepki Kancaları bölümüne bakın.
Örnek:
onChangeGirişi yönetmek için Kancayı kullanın :
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Sertikalı olmak!
95 $ KAYIT
Form Gönderme
onSubmitŞunlar için özniteliğe bir olay işleyici ekleyerek gönderme eylemini kontrol edebilirsiniz <form>:
Örnek:
Özelliğe bir gönder düğmesi ve bir olay işleyici ekleyin onSubmit:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Çoklu Giriş Alanları
nameHer öğeye bir nitelik ekleyerek birden fazla giriş alanının değerlerini kontrol edebilirsiniz
.
Durumumuzu boş bir nesne ile başlatacağız.
Olay işleyicisindeki alanlara erişmek için
event.target.nameve
event.target.valuesözdizimini kullanın.
Durumu güncellemek için özellik adının çevresinde köşeli parantez [parantez işareti] kullanın.
Örnek:
İki giriş alanı olan bir form yazın:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Not: Her iki giriş alanı için de aynı olay işleyici işlevini kullanıyoruz, her biri için bir olay işleyici yazabiliriz, ancak bu bize daha temiz kod verir ve React'te tercih edilen yoldur.
metin alanı
React'teki textarea öğesi, sıradan HTML'den biraz farklıdır.
HTML'de bir textarea'nın değeri, başlangıç etiketi
<textarea>
ile bitiş etiketi arasındaki metindi </textarea>.
<textarea>
Content of the textarea.
</textarea>React'te bir textarea'nın değeri, bir değer niteliğine yerleştirilir. useStateTextarea'nın değerini yönetmek için Hook'u kullanacağız :
Örnek:
Bazı içeriğe sahip basit bir textarea:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Seçme
React'teki bir açılır liste veya bir seçim kutusu da HTML'den biraz farklıdır.
HTML'de, açılır listede seçilen değer şu selectedöznitelikle tanımlandı:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>React'te seçilen değer, etikette bir value
öznitelikle tanımlanır:select
Örnek:
Yapıcıda seçilen "Volvo" değerinin başlatıldığı basit bir seçim kutusu:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
<textarea>ve üzerinde bu küçük değişiklikleri yaparak <select>, React tüm girdi öğelerini aynı şekilde işleyebilir.