تمرير بيانات الحالة في React باستخدام JavaScript

تُعتبر React منصة قوية تساعد المطورين على بناء واجهات مستخدم تفاعلية، مما يجعلها خيارًا شائعًا بين المبرمجين. ومن بين التحديات التي قد تواجههم، تكون عملية تمرير البيانات بين المكونات أمرًا شائعًا يتطلب إدارة جيدة للحالة. في هذا المقال، سنتناول كيفية تمرير بيانات الحالة باستخدام React بطريقة تسهل فهمها وتطبيقها.

فهم حالة المكونات في React

قبل البدء بتوجيه البيانات بين المكونات، يجب أن نفهم ما هي الحالة (state) في React. الحالة تعكس البيانات التي يتم إدارتها داخل مكون، وعندما تتغير هذه الحالة، يُعاد عرض المكون تلقائيًا. تشمل السيناريوهات الشائعة التي تتطلب تمرير البيانات من مكون إلى آخر مثل نماذج الإدخال.

كيفية تمرير بيانات الحالة باستخدام React

عند بناء مكون يتطلب إدخال بيانات من المستخدم، مثل اسم مستخدم، يمكننا استخدام useState لضبط حالة المدخلات. إليك مثال على كيفية استخدام useState وonChange لضبط الحالة بشكل صحيح.

import { useState } from 'react';
import { Link } from 'react-router-dom';
function Main() {
    const [username, setUsername] = useState("");
    function handleChange(e) {
        setUsername(e.target.value);
    }
    return (
        <form>
            <label>
                أدخل اسم مستخدم last.fm الخاص بك أدناه:
                <input type="text" value={username} onChange={handleChange} />
            </label>
            <Link to={`/link-page`} state={{ username }}>
                <button type="button">انتقل</button>
            </Link>
        </form>
    );
}

كما يظهر في الشيفرة البرمجية أعلاه، يتم تحديد المدخلات من قبل المكون الرئيسي. هذا يسمح لنا بالتحكم الكامل في قيمة المدخلات من خلال الحالة. تجنب استخدام IDs لاستدعاء العناصر مثل document.getElementById، حيث يعتبر هذا نمطًا غير مرغوب فيه في React.

تجنب إعادة تحميل الصفحة

إذا كنت تستخدم نموذجًا وتريد التعامل مع حدث الإرسال (submit)، تأكد من منع إعادة تحميل الصفحة. يمكنك القيام بذلك باستخدام e.preventDefault() أثناء معالجة إرسال النموذج. إليك كيفية ذلك باستخدام useNavigate للتنقل إلى الصفحة الجديدة.

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
function Main() {
    const [username, setUsername] = useState("");
    const navigate = useNavigate();
    function handleChange(e) {
        setUsername(e.target.value);
    }
    function onSubmit(e) {
        e.preventDefault(); // منع إعادة تحميل الصفحة
        navigate("/link-page", { state: { username } });
    }
    return (
        <form onSubmit={onSubmit}>
            <label>
                أدخل اسم مستخدم last.fm الخاص بك أدناه:
                <input type="text" value={username} onChange={handleChange} />
            </label>
            <button type="submit">إرسال</button>
        </form>
    );
}

في هذا المثال، تُعتبر دالة onSubmit هي المسؤول عن التعامل مع إرسال النموذج. عندما يتم الضغط على زر الإرسال، تتم معالجة النموذج دون الحاجة إلى إعادة تحميل الصفحة، ويتم نقل اسم المستخدم إلى الصفحة التالية.

الخلاصة

يمكن أن يمثل تمرير بيانات الحالة باستخدام React تحديًا في البداية، لكن من خلال فهم كيفية استخدام useState وonChange بشكل صحيح، يمكنك بناء تطبيقات تفاعلية بشكل أسهل. باستخدام الأساليب الموضحة في هذا المقال، يمكنك تحسين كيفية إدارة البيانات في تطبيقك.

باختصار، يعتبر مفهوم تمرير بيانات الحالة في React جزءًا أساسياً من بناء واجهات مستخدم ديناميكية. يُطبق ذلك باستخدام أدوات مثل useState وonChange، مما يتيح لك التحكم الكامل في تجربة المستخدم دون تعقيد الأمور.