فرم ها (Forms) در ReactJS – آموزش ReactJS

  • پنج شنبه ۱۶ اسفند ۱۳۹۷
  • بازدید ۱۷۷ نفر

reactjs forms 6149 تصویر

فرم ها (Forms) در ReactJS

در این بخش شما با نحوه استفاده از فرم ها در ReactJS آشنا خواهید شد.

مثال ساده از فرم ها

در مثال زیر ما یک فرم ورودی با مقدار {this.state.data} ایجاد کرده ایم و زمانی که مقدار ورودی تغییر کند، مقدار موجود در state نیز به روز می شود. ما از رویداد onChange استفاده کرده ایم. این رویداد زمانی که محتویا داخل ورودی تغییر کند، state را بر اساس تغییرات جدید به روز می کند.

محتوای فایل App.jsx:

محتوای فایل main.js:

خروجی مثال فوق:

reactjs forms 6149 1 تصویر

مثال پیچیده از فرم ها

در این مثال نحوه استفاده از فرم های موجود در داخل کامپوننت فرزند را بررسی می کنیم. یک مثال شبیه به این در بخش Events (رویدادها) نیز استفاده شده است. هر زمان نیاز باشد تا state را از داخل کامپوننت فرزند به روز کنیم، باید تابعی که state را به روز رسانی (updateState) می کند را به عنوان پراپرتی (updateStateProp) به کامپوننت فرزند ارسال کنیم.

محتوای فایل App.jsx:

محتوای فایل main.js:

خروجی مثال فوق:

reactjs forms 6149 2 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است