مثال بسيط باستخدام 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
لتحديث الفاكهة في المصفوفة. - عند تعديل فاكهة، يظهر حقل نصي وزر “حفظ” بدلاً من اسم الفاكهة وزر “تعديل”.
تعليقات
إرسال تعليق