تعامل React: ویرایش ، فیلتر ، ارائه مشروط

همانطور که نزدیک به پایان سفر React خود هستیم (حداقل در حال حاضر) ، لمس های نهایی را به مناطق اصلی عملکرد در برنامه لیست TODO ما اضافه خواهیم کرد. این شامل این امکان است که به شما امکان ویرایش کارهای موجود و فیلتر کردن لیست وظایف بین همه ، انجام شده و ناقص را بدهید. ما در طول مسیر به ارائه UI مشروط خواهیم پرداخت.

آشنایی با زبانهای اصلی HTML ، CSS و JavaScript ، دانش خط ترمینال/فرمان.

ویرایش نام یک کار

ما هنوز رابط کاربری برای ویرایش نام یک کار نداریم. ما در یک لحظه به آن خواهیم رسید. برای شروع ، حداقل می توانیم یک تابع edittask () را در App. js پیاده سازی کنیم. این شبیه به DeletEtask () خواهد بود زیرا برای یافتن هدف هدف خود شناسه می گیرد ، اما یک ویژگی جدید را نیز برای به روزرسانی این کار می گیرد. ما به جای array. prototype. filter () از array. prototype. map () استفاده خواهیم کرد زیرا می خواهیم به جای حذف چیزی از آرایه ، یک آرایه جدید را با برخی تغییرات برگردانیم.

عملکرد edittask () را در مؤلفه برنامه خود ، در همان مکان با سایر توابع اضافه کنید:

Edittask را به همان روشی که با DeletEtask انجام دادیم ، به اجزای ما منتقل کنید:

اکنون Opdo. js را باز کنید. ما قصد داریم برخی از اصلاحات را انجام دهیم.

UI برای ویرایش

برای اینکه کاربران بتوانند یک کار را ویرایش کنند ، باید یک رابط کاربری برای انجام این کار ارائه دهیم. اول ، با به روزرسانی اولین بیانیه واردات به این موضوع ، Usestate را به مؤلفه TODO مانند ما با مؤلفه برنامه وارد کنید:

اکنون ما از این استفاده خواهیم کرد تا یک حالت isediting را تنظیم کنیم ، وضعیت پیش فرض آن باید نادرست باشد. خط زیر را فقط در قسمت بالای TODO خود اضافه کنید (Props)< >تعریف مؤلفه:

در مرحله بعد ، ما می خواهیم به مؤلفه تجدید نظر کنیم - از این پس ، ما می خواهیم یکی از دو "الگوی" ممکن را به جای الگوی منفرد که تاکنون استفاده کرده است ، به نمایش بگذارد:

• الگوی "نمای" ، هنگامی که ما فقط در حال مشاهده یک Todo هستیم. این همان چیزی است که ما تاکنون در آموزش استفاده کرده ایم.
• الگوی "ویرایش" ، هنگامی که ما در حال ویرایش Todo هستیم. ما در حال ایجاد این هستیم.

این بلوک کد را در عملکرد TODO () ، در زیر قلاب استفاده () اما بالاتر از بیانیه بازگشت ، کپی کنید:

اکنون دو ساختار الگوی مختلف - "ویرایش" و "مشاهده" - که در داخل دو ثابت جداگانه تعریف شده است ، به دست آورده ایم. این بدان معنی است که بیانیه بازگشت اکنون تکراری است - همچنین شامل تعریفی از الگوی "نمای" است. ما می توانیم این کار را با استفاده از رندر مشروط تمیز کنیم تا مشخص کنیم کدام الگوی بازده مؤلفه است و بنابراین در UI ارائه می شود.

ارائه مشروط

در JSX می توانیم از شرایطی استفاده کنیم تا آنچه را که توسط مرورگر ارائه می شود ، تغییر دهیم. برای نوشتن شرط در JSX ، می توانیم از یک اپراتور سه گانه استفاده کنیم.

در مورد مؤلفه ما ، شرط ما این است که "آیا این کار ویرایش شده است؟"بیانیه بازگشت را در داخل TODO تغییر دهید () به گونه ای که چنین باشد:

مرورگر شما باید تمام کارهای شما را دقیقاً مانند گذشته انجام دهد. برای دیدن الگوی ویرایش ، باید حالت پیش فرض را از False به True در کد خود تغییر دهید. ما به دنبال ایجاد دکمه ویرایش در بخش بعدی خواهیم بود!

تغییر دادن الگوها

در آخر ، ما آماده هستیم تا ویژگی اصلی اصلی خود را تعاملی کنیم. برای شروع ، وقتی کاربر دکمه "ویرایش" را در Viewtemplate ما فشار می دهد ، می خواهیم با تنظیم () با مقدار واقعی تماس بگیریم تا بتوانیم الگوها را تغییر دهیم.

دکمه "ویرایش" را در Viewtemplate مانند SO به روز کنید:

اکنون ما همان کنترل کننده OnClick را به دکمه "لغو" در ویرایش Template اضافه خواهیم کرد ، اما این بار ما به False می پردازیم تا ما را به الگوی نمایش تغییر دهیم.

دکمه "لغو" را در EditingTemplate مانند SO به روز کنید:

با استفاده از این کد ، باید بتوانید دکمه های "ویرایش" و "لغو" را در موارد TODO خود فشار دهید تا بین قالب ها جابجا شوید.

مرحله بعدی این است که در واقع عملکرد ویرایش را کار کند.

ویرایش از UI

بخش اعظم کارهایی که ما می خواهیم انجام دهیم ، کاری را که در فرم انجام دادیم آینه خواهد کرد: به عنوان کاربر در قسمت ورودی جدید ما ، باید متنی را که وارد می کنند ردیابی کنیم. پس از ارسال فرم ، ما باید از یک پاسخ پاسخ به تماس استفاده کنیم تا وضعیت خود را با نام جدید کار به روز کنیم.

ما با ساختن یک قلاب جدید برای ذخیره و تنظیم نام جدید شروع خواهیم کرد. هنوز هم در todo. js ، موارد زیر را در زیر قلاب موجود قرار دهید:

در مرحله بعد ، یک عملکرد HandleChange () ایجاد کنید که نام جدید را تنظیم کند. این را در زیر قلاب ها قرار دهید اما قبل از قالب ها:

اکنون زمینه EditingTemplate را به روز خواهیم کرد ، یک ویژگی مقداری از NewName را تنظیم می کنیم و عملکرد HandleChange () خود را به رویداد OnChange خود الزام آور می کنیم. آن را به شرح زیر به روز کنید:

سرانجام ، ما باید یک تابع ایجاد کنیم تا از رویداد Onsubmit فرم ویرایش استفاده کنیم. موارد زیر را دقیقاً زیر عملکرد قبلی اضافه کنید:

به یاد داشته باشید که پاسخ تماس با ما در زمینه تماس با ما به شناسه کاری که وی در حال ویرایش هستیم و همچنین نام جدید آن نیاز دارد.

این عملکرد را با اضافه کردن کنترل کننده Onsubmit زیر به EditingTemplate ، به رویداد ارسال فرم وصل کنید:

اکنون باید بتوانید یک کار را در مرورگر خود ویرایش کنید!

بازگشت به دکمه های فیلتر

اکنون که ویژگی های اصلی ما کامل است ، می توانیم در مورد دکمه های فیلتر خود فکر کنیم. در حال حاضر ، آنها برچسب "همه" را تکرار می کنند ، و هیچ عملکردی ندارند!ما در برخی از مهارتهایی که در مؤلفه خود استفاده کردیم دوباره استفاده خواهیم کرد:

• برای ذخیره فیلتر فعال قلاب ایجاد کنید.
• مجموعه ای از عناصری را که به کاربران امکان می دهد فیلتر فعال را بین همه ، تکمیل شده و ناقص تغییر دهند ، ارائه دهید.

اضافه کردن قلاب فیلتر

یک قلاب جدید را به عملکرد برنامه () خود اضافه کنید که فیلتر را می خواند و تنظیم می کند. ما می خواهیم فیلتر پیش فرض همه باشد زیرا همه وظایف ما باید در ابتدا نشان داده شود:

تعریف فیلترهای ما

هدف ما در حال حاضر دو برابر است:

• هر فیلتر باید یک نام منحصر به فرد داشته باشد.
• هر فیلتر باید یک رفتار منحصر به فرد داشته باشد.

یک شیء JavaScript راهی عالی برای ارتباط نام با رفتارها خواهد بود: هر کلید نام یک فیلتر است. هر خاصیت رفتار مرتبط با آن نام است.

در بالای App. js ، در زیر واردات ما اما بالاتر از عملکرد برنامه ما () ، بیایید یک شیء به نام Filter_Map را اضافه کنیم:

مقادیر filter_map توابعی هستند که ما برای فیلتر کردن آرایه داده ها از آنها استفاده خواهیم کرد:

• فیلتر All تمام کارها را نشان می دهد ، بنابراین ما برای همه کارها صادق هستیم.
• فیلتر فعال وظایفی را نشان می دهد که پروانه تکمیل شده آنها نادرست است.
• فیلتر تکمیل شده وظایفی را نشان می دهد که پروانه تکمیل شده آنها درست است.

در زیر اضافه قبلی ما ، موارد زیر را اضافه کنید - در اینجا ما از روش Object. Keys () استفاده می کنیم تا آرایه ای از filter_names را جمع آوری کنیم:

توجه: ما این ثابت ها را در خارج از عملکرد برنامه () تعریف می کنیم زیرا اگر در داخل آن تعریف شوند ، هر بار که مجدداً مؤلفه را مجدداً محاسبه می کنند ، محاسبه می شوند و ما آن را نمی خواهیم. این اطلاعات مهم نیست که برنامه ما چه کاری انجام می دهد.

ارائه فیلترها

اکنون که آرایه FILTER_NAMES را داریم، می‌توانیم از آن برای رندر کردن هر سه فیلترمان استفاده کنیم. در داخل تابع App() می‌توانیم یک ثابت به نام filterList ایجاد کنیم که از آن برای نگاشت آرایه‌ای از نام‌ها و برگرداندن یک جزء استفاده می‌کنیم. به یاد داشته باشید، ما در اینجا نیز به کلید نیاز داریم.

موارد زیر را زیر اعلان ثابت taskList خود اضافه کنید:

اکنون سه s تکرار شده در App. js را با این filterList جایگزین می کنیم. موارد زیر را جایگزین کنید:

این هنوز کار نخواهد کرد. ابتدا کمی کار بیشتری داریم.

فیلترهای تعاملی

برای تعاملی کردن دکمه‌های فیلتر، باید در نظر بگیریم که آنها از چه لوازمی باید استفاده کنند.

• ما می دانیم که باید گزارش دهد که آیا در حال حاضر فشرده شده است یا خیر، و اگر نام آن با مقدار فعلی وضعیت فیلتر ما مطابقت داشته باشد باید فشار داده شود.
• ما می دانیم که برای تنظیم فیلتر فعال نیاز به یک تماس مجدد دارد. ما می توانیم مستقیماً از قلاب setFilter خود استفاده کنیم.

ثابت filterList خود را به صورت زیر به روز کنید:

به همان روشی که قبلاً با مؤلفه خود انجام دادیم، اکنون باید FilterButton. js را به روز کنیم تا از ابزارهایی که به آن داده ایم استفاده کنیم. هر یک از موارد زیر را انجام دهید و به یاد داشته باشید که برای خواندن این متغیرها از بریس های فرفری استفاده کنید!

• همه را با .
• مقدار aria-pressed را روی .
• یک کنترل کننده onClick اضافه کنید که props. setFilter() را با نام فیلتر فراخوانی می کند.

با انجام همه این کارها، تابع FilterButton() شما باید به صورت زیر باشد:

دوباره به مرورگر خود مراجعه کنید. باید ببینید که دکمه های مختلف نام های مربوط به خود را داده اند. وقتی یک دکمه فیلتر را فشار می دهید، باید متن آن را به صورت طرح کلی جدید ببینید - این به شما می گوید که انتخاب شده است. و اگر در حین کلیک کردن روی دکمه‌ها به بازرس صفحه DevTool خود نگاه کنید، خواهید دید که مقادیر مشخصه فشار داده شده aria بر این اساس تغییر می‌کند.

با این حال، دکمه های ما هنوز در واقع کارها را در UI فیلتر نمی کنند!بیایید این را تمام کنیم

فیلتر کردن وظایف در رابط کاربری

در حال حاضر، ثابت taskList ما در App() روی وضعیت tasks نگاشت می شود و یک جزء جدید برای همه آنها برمی گرداند. این چیزی نیست که ما می خواهیم!یک کار فقط در صورتی باید ارائه شود که در نتایج اعمال فیلتر انتخاب شده باشد. قبل از اینکه وضعیت وظایف را نگاشت کنیم، باید آن را فیلتر کنیم (با Array. prototype. filter()) تا اشیایی را که نمی‌خواهیم رندر کنیم حذف کنیم.

TaskList خود را به این صورت به روز کنید:

In order to decide which callback function to use in Array.prototype.filter() , we access the value in FILTER_MAP that corresponds to the key of our filter state. When filter is All , for example, FILTER_MAP[filter] will evaluate to () =>درست است، واقعی .

اکنون با انتخاب یک فیلتر در مرورگر، کارهایی که با معیارهای آن مطابقت ندارند حذف می شود. تعداد در عنوان بالای لیست نیز تغییر می کند تا لیست را منعکس کند!

خلاصه

پس همین است - برنامه ما اکنون از نظر عملکرد کامل است. با این حال، اکنون که همه ویژگی‌های خود را پیاده‌سازی کرده‌ایم، می‌توانیم برای اطمینان از اینکه طیف وسیع‌تری از کاربران می‌توانند از برنامه ما استفاده کنند، چند بهبود ایجاد کنیم. مقاله بعدی ما با بررسی شامل مدیریت تمرکز در React که می‌تواند قابلیت استفاده را بهبود بخشد و سردرگمی را برای کاربران صفحه‌کلید و صفحه‌خوان‌خوان کاهش دهد، آموزش‌های React را کامل می‌کند.