YT YouTube2Text

YouTube2Text → Transcripts → 45: Sending the event handler to the props

45: Sending the event handler to the props — Transcript

by أكاديمية ترميز · 1,879 words · 258 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00السلام عليكم حياكم الله بالدرس ال 45 من
0:02سلسله دروس رياكت جي اس في الدرس السابق
0:05مرينا على مشكله التعامل مع البروبس وكيف
0:08انك اصلا المفروض ما تغير البروبس من
0:10الشيلد كومبونت وانما لازم تلاقي حل معين
0:15ما يتدخل في تيلد كومبونت بالاشياء الغير
0:18متعلقه فيه اللي هي ممكن نضيفها الى ما
0:21يعرف بالسايد اكت وبالتالي في هذا الدرس
0:24راح نشوف كيف ممكن نحل ها المشكله من خلال
0:27انه نسوي باسينج للايفنت هاندلر من
0:30البيرنت الى التشاد هذا هو الكود اللي
0:33توقفنا عنده في الدرس السابق لاحظ اني انا
0:34سويت الماي كومبونت اللي هو بيحتوي على
0:36هذا الانبوت اللي انا بدي اصممه بطريقه
0:38معينه او بدي افصله الى كومبونت مستقل لاي
0:42سبب كان بعدين من داخل اللون فورم انا عم
0:44استخدم هذا الماي كمبوننت فراح تلاحظ انه
0:47في ها الجزئيه انا استبدلت الانبوت تبع
0:50الفون نمبر بحيث اني استخدم هذا الماي
0:52كومبونت بس اضطريت اني ارسل له هاي
0:54المعلومات عشان اكون قادر على تحديث
0:57البيانات لما يتغير الانبوت وراح تلاحظ
1:00انه الماي كومبونت واحده من اكبر مشاكله
1:03او وحده من اكبر الممارسات الخاطئه
1:06الموجوده فيه هو اني انا عم مستدعي فانكشن
1:09هاي الفانكشن فعليا هي تشير لي الى ايش
1:13تشير لي الى الست لون انبوت وبالتالي هي
1:16بتحدث لي الستيت بس الستيت ها اصلا ماه
1:20تابعه على هذا الكومبوننت وانما تابعه على
1:22هذا البيرنت كومبونت فالمفروض ما حدا يحدث
1:25الستيت تبع البيرنت كومبونت من التش شايلد
1:27وانما البيرنت كومبونت هو اللي يحدث
1:30طيب المشكله انه الايفنت تبع التغيير عم
1:33يصير من داخل التشاد كومبونت فعلى اي اساس
1:36بدي اخلي تحديث الستيت منفصل عن الايفنت
1:41اللي عم يسوي تريجر لتحديث الستيت اللي هو
1:43الاون شينج هذا بيتم عن طريق ممارسه جدا
1:48شائعه لما بتوصل لهي النتيجه ومحتاج انك
1:51تسوي تحديث او تواصل من جهه التشاد الى
1:55البيرنت وهو انك اصلا تعرف الفنكشن اللي
1:58راح تساوي لك
2:01في البيرنت نفسه وهي اللي تروح تسويلها
2:04باس كاحد البروبس الىد كومبونت بمعنى اخر
2:09انا هون ممكن اجي واعرف فانكشن ها الفنكشن
2:13راح اسميها باسم
2:15هاندل فون نمبر انبوت تينج بهذا الشكل
2:21وراح افتح الكيري براكت وراح اسكر وهاي
2:24الفنكشن هي المسؤوله عن
2:26استدعاء الست لون انبوت اللي هي عباره عن
2:30الفنكشن اللي بتحدث لي الستيت تبع اللون
2:32انبوت وبالتالي من هون انا راح استدع راح
2:36استدعي مين راح استدعي ست لون انبوت لاحظ
2:39تعريف الفنكشن ها هاندل فون نمبر انبوت
2:42تينج انا في البيرنت كومبونت بس بعرف
2:45الفانكشن طيب مين بيست دعيلي اياها
2:48بيدعيلي اياها الشيلد كومبونت لما يصير في
2:52ايفنت معين يستدعي هذا الاستدعاء بمعنى
2:55اخر لاحظ اني هون عرفتها وما راح استدع في
2:58البيرنت كومبونت لكن اللي راح اسويه انه
3:00هاي الفانكشن راح اخذ اسمها وراح ارسلها
3:04كبرو بس الى الشيلد كومبونت اللي هو الماي
3:07كومبونت فراح لله شوف الهاندل تينج ها
3:10البرتي تبع الماي كومبونت راح تصير تشير
3:13الى هاي الفنكشن اللي هي اسمها هاندل فون
3:16نمبر انبوت تينج وبماي كومبونت لما يصير
3:20اي تغيير انا عم يوصلني فانكشن اسمها
3:23هاندل تينج هي فعليا تشير الى فنكشن اخرى
3:27ممكن تسميها الهاندلينج تبع البيرنت انا
3:29سميتها باسم هاندل فون نمبر انبوت تينج
3:33وبالتالي لو استدعيت الهاندل تينج من داخل
3:35الماي كومبونت فكاني عم مستدعي الهاندل
3:38فون نمبر انبوت تينج اللي هي اصلا معرفه
3:41وين في البيرنت كومبونت وبالتالي انا بجي
3:44عند هذا المكان وبقوله شوف لما يصيرلي اون
3:47تينج لا تستدعي لي الهاندل تينج اللي كانت
3:49تشير الى ست لون انبوت وكانها هي اللي عم
3:53تحدث لي الستيت من التشاد كومبونت لا انا
3:56ما بدي احدث الستيت من التشاد كومبونت انا
3:58بدي اروح استدعي هي الداله اللي تم عمل
4:01باس لها عن طريق الهاندل تينج فراح يجي
4:05اقول له استدعي لي الهاندل تينج وال
4:07الهاندل تشينج هاي ما راح اسوي لها باس ل
4:11بارامتر احدد فيها ايش هي الكرنت ستيت
4:14وانسخ الكرنت ستيت واضيف عليها لا هذا
4:17الكومبوننت ككل لازم ما يحتاج يعرف اي شيء
4:21عن الستيت تبع هذا البيرنت كومبونت اللي
4:23اسمه لون فورم وبالتالي هو بس بيرسل له
4:26القيمه الجديده فانا ممكن ارسل له
4:28الايفينت دوت تارجت دوت value بهذا الشكل
4:32وبالتالي انا عم استدعي الهاندل تينج
4:35والهاند تينج ها عباره عن ايش هي تمثل من
4:39خلال ارسال الروبرت لاحظ انه الهاندل تينج
4:41اللي تم ارسالها الماي كومبونت هي تشير
4:43الى الهاندل فون نمبر انبوت تينج وبالتالي
4:46كاني لما عم اقول له هاندل تشينج في هذا
4:49المكان تبع الماي كومبونت فكاني عم استدعي
4:51ها الداله اللي هي ما هي معرفه بهذا
4:53الكومبوننت ولكنها معرفه بالبنت كومبونت
4:56فلذلك اذا حطيتها بهذا الشكل طبيعي راح
4:58يحط لك ايرور ويقوللك انه فشن انفا وعم
5:01رسل كرامر الانبوت اللي هو بمثل لي القيمه
5:05الجديده بعد ما تغير الانبوت تبع الفون
5:09نمبر وبالتالي انا المفروض من ها الفنكشن
5:12اللي سميتها بالهاند الفون نمبر انبوت
5:14تينج الموجوده عندي في البيرنت اقول له
5:16ترى هي راح تستقبل بارامتر هذا البارامتر
5:19راح يكون فالو بعدين من هون انا ممكن الان
5:23اني استدعي الداله اللي اسمها ست لون
5:25انبوت وبالتالي بصير البيرنت هو اللي عم
5:28يحدث الستيت خاصه فيه مو حدا ثاني عم يحدث
5:31له اياها لذلك انا الان ممكن اجي اقول له
5:33ست لون انبوت وبنفس الطريقه ا لله انسخي
5:38اللون انبوت الحالي الموجود عندك وغير لي
5:43الفون نمبر بحيث انه يعكس لي الفالو
5:46الجديده بهذا الشكل فراح اسوي سيف الان
5:49وراح ارجع مره ثانيه اشوف النتيجه لاحظ
5:52هون انا ممكن اعبي النيم ولو رحت الفون
5:53نمبر انا عم ابيه بدون اي مشاكل ليش لانه
5:56هذا فعليا مرتبط باستيت تبع الفورم ففعل
6:00انا ما غيرت شيء من ناحيه النتيجه
6:03النهائيه لكن اللي بيهمني في الموضوع انه
6:06صار اللي بيحدث لي الاستيت هو اصلا
6:09الكومبوننت اللي عم يستخدم ها الستيت مو
6:12التشيد تبعه لانك لو اعتمدت على التشاد في
6:15تحديث الاستيت فانت عم تمشي على ممارسه
6:17خاطئه راح تسبب لك مجموعه من المشاكل مع
6:20مرور الوقت فالمفروض انه الكومبوننت ما
6:23يعدل على البروبس ولا يعدل على الاستيتس
6:25اللي ما له علاقه فيها وانما يستدعي
6:28بطريقه غير باشره فانكشن يتم تعريفها في
6:31البيرنت ويتم استدعائها في التشاد بهذا
6:35الشكل بحيث انه التشاد هو اللي يوفر لها
6:38المعلومات الخاصه فيها مثل الفالو عشان
6:40يتم استقبالها في البيرنت وبعدين يسوي
6:43ستلون انبوت انا عارف انه ها الجزئيه ممكن
6:46تلخبط شوي كيف اني عرفت فانكشن بالبنت
6:49بعدين سويت لها باس لل تشايلد بعدين
6:51التشاد هو اللي استدعاها وهو اللي حدد
6:53البارامتر بعدين رجعنا استقبلنا البارامتر
6:56من هذا المكان عشان نسوي ست ل يت لكن لما
7:02تبدا تشتغل عليها مره ومرتين وثلاثه راح
7:04تبدا تتعود عليها غير انه ها واحده من
7:07يعني خلينا نسميها التركات الشائعه جدا
7:10عشان اذا كان عندك ستيت كبيره معرفه في
7:13البيرنت وانت محتاج تحدثها من التشاد فانت
7:18ما بتحدثها بشكل مباشر عشان ما تسبب لنفسك
7:20مشاكل وانما بتروح بتستعين فانكشن يتم
7:23تعريفها في البيرنت وهي اللي بتروح بتحدث
7:26لك الستيت بهاي الطريقه فهي واحده من
7:28الجزئيات المهم مهمه جدا لما نتكلم عن
7:31موضوع التواصل ما بين البيرنت وما بين
7:34التشاد الان النقطه المهمه انه بالماي
7:37كومبونت ترى انا ما عاد محتاج اني ارسل
7:39الكرنت انبوت ليش لان الكرنت انبوت كانت
7:42تمثل الكرنت ستيت وبالتالي كنت اخذها عشان
7:46انسخها وازيد عليها الاشياء اللي بدي
7:48اغيرها بس الان خلص تشايلد كومبونت ما
7:51بيحتاج يعرف اي شيء عن الستيت وانما راح
7:54تكون مهمه البيرنت كومبونت فانا بمسح
7:56الكرنت انبوت وخلص انا بس بتلقى الفالو
7:59بقرا منها وبتلقى الهاندل تشينج اللي هي
8:01الفانكشن اللي يستدعيها لما بدي احدث
8:04الفالو وعكسها على الستيت فالان بقدر اقول
8:06انه هذا الماي كمبوننت صار رييوز ابل
8:08وبقدر استخدمه عده مرات فممكن ارجع الان
8:11على اللون فورم وكل هذول الانبوت اروح
8:14احولهم الى الكومبوننت الجديد فراح اجي
8:17عند النيم لكن قبلها لاحظ انه هون انا
8:20كاتب فون نمبر والمفروض انه هذا يكون
8:22عباره عن شيء متغير لانه هون راح يكون نيم
8:25وهون راح يكون ايج وهون راح يكون فون نمبر
8:28فهون انا محتاج متغير يعرف لي الليبل
8:31حتقول لي طيب انا مو هيك عم اقلل من الوزب
8:33لتي لا لانه هذا عنوان الكومبوننت اساسا
8:37وطبيعي جدا اي انبوت انت بدك تحدد له ايش
8:40هو التايتل اللي لازم يظهر فيه هل هذا
8:43التايتل عم اعدله من داخل الكومبوننت لا
8:45هذا التايتل عم نستخدمه عشان اقراه واعكس
8:48شكل الكومبوننت بناء على الاشياء اللي حدد
8:51لي اياها البيرنت كومبونت فهي الحاله
8:53مختلفه عن حاله اني اسوي باس لل ستيت واخذ
8:57الستيت واحتاج اني انسخها واحدثها من عن
8:59عندي اتمنى انه الفرق واضح وبالتالي هون
9:02انا ممكن اجي اقول له انه راح يكون في
9:04عندي مثلا الانبوت نيم وبعدين في هذا
9:08المكان انا بدي احط الانبوت نيم اللي هو
9:11عباره عن المتغير وهون في اللون فورم اول
9:14شيء راح اروح عند هذا الماي كومبونت ما
9:18عاد بدي ارسل الكرنت انبوت خلص ولكن بدي
9:21ارسل المتغير الجديد او البروب الجديد
9:23اللي هو عباره عن الانبوت نيم وهذا
9:25الانبوت نيم راح يكون عباره عن فون نمبر
9:28طبعا اذا بده يحطه كستر مباشره انا ممكن
9:30احطه بهذا الشكل خلاص ما استخدم الاقواس
9:32الخاصه بالكيرلي براكيت فانا راح اقول له
9:35فون نمبر وراح اسوي سيف وارجع مره ثانيه
9:38لاحظ انه هون مطلع لي فون نمبر والان بنفس
9:40الطريقه انا ممكن اخذ الماي كومبونت واروح
9:44مثلا انسخه للنيم راح انسخه النيم فقط بس
9:46عشان اوضح لك الفكره هون راح اقول له انه
9:48هذا راح يكون نيم ولكن الفانكشن اللي راح
9:51تستقبل هون لازم ما تكون الهاندل فون نمبر
9:54انبوت تينج وانما يكون فانكشن اخرى مخصصه
9:56للنيم الا اذا بدك تسوي ريز لهي الفانكشن
9:59ثانيه بطريقه معينه بس انا الان راح
10:01افصلهم الى فانكشن اخرى فراح اجي اقول له
10:04مثل ما عندي هاندل فون نمبر انبوت تينج
10:06راح يكون عندي فنكشن ثانيه اسمها هاندل
10:09نيم انبوت تينج واللي بتسوي لي اياه انه
10:12بتروح بتغير لي النيم تحديدا وبالتالي هون
10:16راح اقول له بالنسبه للانبوب النيم انا
10:19راح اخليه هاندل نيم انبوت تينج فلو سويت
10:23سيف ورجعت مره ثانيه ورحت وغيرت لاحظ انه
10:26ما عم يعدل لي اياها يبدو لي انه في مشكله
10:28فخليني اتاكد من المشكله اللي عم تصير
10:30لاحظ انه الفالو انا لسه عم ارسل له اياها
10:32من الفون نمبر فهذا هو الغلط الموجود عندي
10:34هون وان المفروض ارسل له النيم لو سويت
10:36سيف ورجعت مره ثانيه راح تلاحظ انه النيم
10:38عم يتحدث عندك خليني اسوي واحده اخيره
10:42للايجتر راح انسخ هذا الكومبوننت راح
10:45استغني الان عن الايج وراح احط هذا
10:47الكومبوننت وبعدين راح اعدل الانبوت نيم
10:50عشان يصير ايج بعدين هون راح استدعي
10:53فانكشن اسمها هاندل ايج انبوت تينج هي
10:57اللي راح يتم تعريفها في البيرنت وهون
10:59الفالو راح اغيرها الى ايج بعدين راح اروح
11:02على الفانكشن الموجوده عندي هون تبع
11:04الهاندل للايفنت وراح اقول له ها راح تكون
11:07هاندل ايج انبوت شينج وهون راح اغير ها
11:11الكي الى ايج لو سويت سيف الان ورجعت مره
11:14ثانيه لاحظ انه حتى الايج صار يعكس لك
11:16النتيجه بدون اي مشاكل ولاحظ كيف انه
11:20موضوع استخراج الكود او اكواد الجي اس اكس
11:23الى كومبونت منفصله خصوصا المتكرره منها
11:27عده مرات كيف رتبت لي كود بشكل اكبر
11:30واختصرت لي عدد الاكواد وخلت لي الموضوع
11:33انظف بالنسبه الي وشغله اكستراكت الكود
11:38للكومبوتر تسمع فيها كثير في رياكت اذا
11:40قريت فيها هي تعتبر احد الممارسات اللي
11:43ممكن تلجا لها متى ما دعت الحاجه وبالتالي
11:46انت بتبدا بطريقه اعتياديه انك تعرف
11:48الفورم بعدين بتكتشف انه في مثلا موضوع
11:51الانبوت والليبي هذا كررته عده مرات فليش
11:54ما اخليه رييوز ابل ب انبوت مستقل او
11:57تكتشف انك استخدمته في عده صفحات مو بس في
12:00نفس الصفحه عده مرات فتقول كمان ليش ما
12:02اخليه ريوزابل بدل ما اني ارجع واكتب
12:04الكود في كل مره وبالتالي ها من الاشياء
12:07اللي راح تبدا تتعود عليها عشان تستخرجها
12:09ككب مع مرور الوقت اتمنى ان شاء الله انه
12:12كان الشرح واضح اذا لسه عندك لخبطه في
12:14الموضوع لا تتردد انك تعيد المقطع مره
12:17ثانيه وتحاول تجرب بايدك وكذلك لا تتردد
12:20انك تطرح سؤالك سواء في التعليقات او في
12:23مجتمع ترميز الخاص بركت ونشوفكم ان شاء
12:26الله بالدرس
12:28الجاي ‏y

About this transcript

This page contains the full transcript of 45: Sending the event handler to the props by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 1,879 words across 258 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.