أشكال رد الفعل
تمامًا كما هو الحال في HTML ، تستخدم React النماذج للسماح للمستخدمين بالتفاعل مع صفحة الويب.
إضافة النماذج في React
تضيف نموذجًا باستخدام React مثل أي عنصر آخر:
مثال:
أضف نموذجًا يسمح للمستخدمين بإدخال أسمائهم:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
سيعمل هذا كالمعتاد ، وسيتم إرسال النموذج وسيتم تحديث الصفحة.
لكن هذا ليس عمومًا ما نريد حدوثه في React.
نريد منع هذا السلوك الافتراضي والسماح لـ React بالتحكم في النموذج.
التعامل مع النماذج
يدور التعامل مع النماذج حول كيفية التعامل مع البيانات عندما تتغير قيمتها أو يتم إرسالها.
في HTML ، عادةً ما يتم التعامل مع بيانات النموذج بواسطة DOM.
في React ، عادةً ما يتم التعامل مع بيانات النموذج بواسطة المكونات.
عندما يتم التعامل مع البيانات بواسطة المكونات ، يتم تخزين جميع البيانات في حالة المكون.
يمكنك التحكم في التغييرات عن طريق إضافة معالجات الأحداث في
onChange
السمة.
يمكننا استخدام useState
الخطاف لتتبع كل قيمة مدخلات وتوفير "مصدر واحد للحقيقة" للتطبيق بأكمله.
راجع قسم React Hooks لمزيد من المعلومات حول الخطافات.
مثال:
استخدم onChange
الخطاف لإدارة الإدخال:
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'));
الحصول على شهادة!
95 دولارًا ENROLL
تقديم الاستمارات
يمكنك التحكم في إجراء الإرسال عن طريق إضافة معالج حدث في onSubmit
السمة لـ <form>
:
مثال:
أضف زر إرسال ومعالج حدث في 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'));
حقول الإدخال المتعددة
يمكنك التحكم في قيم أكثر من حقل إدخال عن طريق إضافة
name
سمة لكل عنصر.
سنقوم بتهيئة حالتنا بكائن فارغ.
للوصول إلى الحقول في معالج الحدث ، استخدم الصيغة
event.target.name
و
event.target.value
syntax.
لتحديث الحالة ، استخدم الأقواس المربعة [تدوين قوسين] حول اسم الخاصية.
مثال:
اكتب نموذجًا يحتوي على حقلي إدخال:
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'));
ملاحظة: نستخدم نفس وظيفة معالج الحدث لكل من حقلي الإدخال ، ويمكننا كتابة معالج حدث واحد لكل منهما ، لكن هذا يعطينا كودًا أكثر وضوحًا وهو الطريقة المفضلة في React.
تيكستاريا
يختلف عنصر textarea في React قليلاً عن HTML العادي.
في HTML ، كانت قيمة منطقة النص هي النص بين علامة البداية وعلامة
<textarea>
النهاية </textarea>
.
<textarea>
Content of the textarea.
</textarea>
في React يتم وضع قيمة منطقة النص في سمة القيمة. سنستخدم useState
الخطاف للتحكم في قيمة منطقة النص:
مثال:
منطقة نصية بسيطة مع بعض المحتوى:
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'));
يختار
تختلف القائمة المنسدلة ، أو مربع التحديد ، في React قليلاً أيضًا عن HTML.
في HTML ، تم تحديد القيمة المحددة في القائمة المنسدلة selected
بالسمة:
لغة البرمجة:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>
في React ، تُعرَّف القيمة المحددة value
بسمة على select
العلامة:
مثال:
مربع اختيار بسيط ، حيث يتم تهيئة القيمة المحددة "فولفو" في المُنشئ:
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>
و <select>
، يصبح React قادرًا على التعامل مع جميع عناصر الإدخال بنفس الطريقة.