مثال بسيط باستخدام React و useState لتمرير مصفوفة من الفواكه وعرضها في قائمة. كما سيمكن المستخدم من إضافة عناصر جديدة إلى القائمة.
import React, { useState } from 'react';
function FruitList() {
// تعريف حالة الفواكه
const [fruits, setFruits] = useState(['تفاح', 'موز', 'برتقال']);
const [newFruit, setNewFruit] = useState('');
// دالة لإضافة فاكهة جديدة إلى القائمة
const addFruit = () => {
if (newFruit.trim() !== '') {
setFruits([...fruits, newFruit]);
setNewFruit(''); // إعادة تعيين الحقل النصي
}
};
return (
<div>
<h1>قائمة الفواكه</h1>
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
<input
type="text"
value={newFruit}
onChange={(e) => setNewFruit(e.target.value)}
placeholder="أضف فاكهة جديدة"
/>
<button onClick={addFruit}>إضافة</button>
</div>
);
}
export default FruitList;
|
في هذا المثال:
- نستخدم
useState لتعريف حالة fruits التي تحتوي على مصفوفة من الفواكه. - نستخدم
useState أيضًا لتعريف حالة newFruit التي تخزن الفاكهة الجديدة التي يريد المستخدم إضافتها. - دالة
addFruit تضيف الفاكهة الجديدة إلى المصفوفة إذا لم تكن فارغة. - يتم عرض الفواكه في قائمة غير مرتبة (
ul)، وكل فاكهة في عنصر قائمة (li). - يوجد حقل نصي لإدخال الفاكهة الجديدة وزر لإضافتها إلى القائمة.
هنا سأضيف زر الحذف لكل فاكهة وأستخدم دالة filter لحذف الفاكهة من القائمة. إليك الكود المعدل:
import React, { useState } from 'react';
function FruitList() {
// تعريف حالة الفواكه
const [fruits, setFruits] = useState(['تفاح', 'موز', 'برتقال']);
const [newFruit, setNewFruit] = useState('');
// دالة لإضافة فاكهة جديدة إلى القائمة
const addFruit = () => {
if (newFruit.trim() !== '') {
setFruits([...fruits, newFruit]);
setNewFruit(''); // إعادة تعيين الحقل النصي
}
};
// دالة لحذف فاكهة من القائمة
const deleteFruit = (fruitToDelete) => {
setFruits(fruits.filter(fruit => fruit !== fruitToDelete));
};
return (
<div>
<h1>قائمة الفواكه</h1>
<ul>
{fruits.map((fruit, index) => (
<li key={index}>
{fruit}
<button onClick={() => deleteFruit(fruit)}>حذف</button>
</li>
))}
</ul>
<input
type="text"
value={newFruit}
onChange={(e) => setNewFruit(e.target.value)}
placeholder="أضف فاكهة جديدة"
/>
<button onClick={addFruit}>إضافة</button>
</div>
);
}
export default FruitList;
|
في هذا المثال:
- أضفنا دالة
deleteFruit التي تستخدم filter لإزالة الفاكهة المحددة من المصفوفة. - أضفنا زر “حذف” بجانب كل فاكهة في القائمة، وعند النقر عليه يتم استدعاء دالة
deleteFruit مع تمرير الفاكهة المراد حذفها.
هنا! سأضيف زر التعديل بجانب زر الحذف لكل فاكهة، وسأستخدم دالة map لتحديث الفاكهة في القائمة. إليك الكود المعدل:
import React, { useState } from 'react';
function FruitList() {
// تعريف حالة الفواكه
const [fruits, setFruits] = useState(['تفاح', 'موز', 'برتقال']);
const [newFruit, setNewFruit] = useState('');
const [editingFruit, setEditingFruit] = useState(null);
const [editingValue, setEditingValue] = useState('');
// دالة لإضافة فاكهة جديدة إلى القائمة
const addFruit = () => {
if (newFruit.trim() !== '') {
setFruits([...fruits, newFruit]);
setNewFruit(''); // إعادة تعيين الحقل النصي
}
};
// دالة لحذف فاكهة من القائمة
const deleteFruit = (fruitToDelete) => {
setFruits(fruits.filter(fruit => fruit !== fruitToDelete));
};
// دالة لبدء تعديل فاكهة
const startEditing = (fruit) => {
setEditingFruit(fruit);
setEditingValue(fruit);
};
// دالة لحفظ التعديلات
const saveEdit = () => {
setFruits(fruits.map(fruit => (fruit === editingFruit ? editingValue : fruit)));
setEditingFruit(null);
setEditingValue('');
};
return (
<div>
<h1>قائمة الفواكه</h1>
<ul>
{fruits.map((fruit, index) => (
<li key={index}>
{editingFruit === fruit ? (
<input
type="text"
value={editingValue}
onChange={(e) => setEditingValue(e.target.value)}
/>
) : (
fruit
)}
{editingFruit === fruit ? (
<button onClick={saveEdit}>حفظ</button>
) : (
<button onClick={() => startEditing(fruit)}>تعديل</button>
)}
<button onClick={() => deleteFruit(fruit)}>حذف</button>
</li>
))}
</ul>
<input
type="text"
value={newFruit}
onChange={(e) => setNewFruit(e.target.value)}
placeholder="أضف فاكهة جديدة"
/>
<button onClick={addFruit}>إضافة</button>
</div>
);
}
export default FruitList;
|
في هذا المثال:
- أضفنا حالة
editingFruit لتحديد الفاكهة التي يتم تعديلها حاليًا، وحالة editingValue لتخزين القيمة الجديدة. - دالة
startEditing تبدأ عملية التعديل وتعين الفاكهة المراد تعديلها. - دالة
saveEdit تحفظ التعديلات باستخدام map لتحديث الفاكهة في المصفوفة. - عند تعديل فاكهة، يظهر حقل نصي وزر “حفظ” بدلاً من اسم الفاكهة وزر “تعديل”.
تعليقات
إرسال تعليق