شرح الكود

Zen Eddin Allaham · 27 يونيو

هل يمكنكم شرح لي هذا الكود بشكل واضح

import React,{useRef, useState} from 'react';
import './App.css'

function App() {
  const [todos , setTodos] = useState([]);
  const refInp = useRef();

  const handelAddTodos = () => {
    const textInp = refInp.current.value;
    setTodos([...todos,textInp])
    refInp.current.value = "";
  }
  return (
    <>
    <div className="App">
      <h2>To Do List</h2>
      <ul>
      {todos.map((item) => {
        return <li>{item}</li>
      })}
      </ul>
      <input ref={refInp} placeholder='Enter item...'/>
      <button onClick={handelAddTodos}>Add</button>
    </div>
    </>
  )
}

export default App;

ياسر مسكين · 27 يونيو

وعليكم السلام ورحمة الله تعالى وبركاته،

في هذه الشيفرة والتي هي عبارة عن تطبيق بسيط لقائمة مهام (To Do List) ففي البداية يتم استيراد useState لإدارة حالة القائمة، وuseRef لإنشاء مرجع لحقل الإدخال هنا:

import React, { useRef, useState } from 'react';

وداخل دالة App نعرّف حالة todos التي تبدأ كمصفوفة فارغة:

const [todos , setTodos] = useState([]);

وتعرّف refInp باستخدام useRef() لحفظ مرجع مباشر لحقل الإدخال:

const refInp = useRef();

أما الدالة handelAddTodos فتستخدم عند الضغط على زر "Add" بحيث تقوم هذه الدالة بقراءة النص المدخل عبر المرجع:

const textInp = refInp.current.value;

ثم تضيفه إلى قائمة المهام باستخدام:

setTodos([...todos, textInp]);

وبعدها تقوم بمسح الإدخال بإسناد قيمة فارغة له:

refInp.current.value = "";

في حين في الجزء المرئي (JSX) يتم عرض العنوان:

<h2>To Do List</h2>

ثم تعرض قائمة المهام باستخدام map() لإظهار كل مهمة في عنصر <li>:

<ul>
  {todos.map((item) => <li>{item}</li>)}
</ul>

بعد ذلك يوجد حقل الإدخال المرتبط بالمرجع:

<input ref={refInp} placeholder="Enter item..." />

في النهاية الزر الذي يستدعي دالة الإضافة عند الضغط عليه:

<button onClick={handelAddTodos}>Add</button>

وفائدة useRef هنا أنه يسمح بالوصول إلى قيمة حقل الإدخال دون الحاجة لتعريف حالة إضافية.

عبد الوهاب بومعراف · 27 يونيو

هذا الكود ينشئ قائمة مهام بسيطة حيث يمكن للمستخدم كتابة مهمة في خانة الإدخال ثم إضافتها بالضغط على الزر.

ويتم استخدام useState لحفظ المهام في مصفوفة بحيث يتم عرضها على الشاشة، وأما useRef نستخدمها للوصول مباشرة إلى قيمة الإدخال بدون الحاجة لإعادة تحميل الصفحة أو تحديث الحالة عند كل ضغط على المفاتيح.

فمثلا عند الضغط على زر Add يتم أخذ النص من حقل الإدخال باستخدام ref.current.value ثم يضاف إلى القائمة باستخدام setTodos، وبعدها يتم إفراغ حقل الإدخال.

والكود يظهر المهام في النهاية باستخدام map داخل قائمة غير مرتبة <ul>.

شرح الكود

السؤال

Zen Eddin Allaham

2 أجوبة على هذا السؤال

Recommended Posts

ياسر مسكين

عبد الوهاب بومعراف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية