OWL

خوش آمدید!

این فروم بستری برای ارتباط بین افرادی است که از بسته Owl نه تنها در توسعه اودوو بلکه برای کارهای دیگر نیز استفاده می‌کنند. از انجا که مستند و کامیونیتی اودوو کمی ضعیف است امیدواریم که این فروم بتواند در توسعه مهارت‌های برنامه نویسی فارسی زبانان موثر باشد. باعث افتخار ما است که شما نیز به گروه ما بپیوندید.

0

روش درست متصل کردن متغیرها به کنترلرهای یک فرم در Owl چطور مدیریت می‌شود؟

فرش کنید که شما یک فرم دارید و می‌خواهید آن را با استفاده از یک کامپوننت مدیریت کنید. می‌خواهیم هر زمان که کاربر مقدار یک متغیر را تغییر داد ما متوجه بشیم و یا اینکه به صورت خودکار تغییرات ایجاد شده در یک متغیر در کامپونینت ذخیره شود.

من به دنبال راهی هستم که در Owl این کار به صورت درست انجام شود.


سوال خود را اینجا مطرح کنید
آواتار
انصراف
1 پاسخ
0
بهترین پاسخ

پاسخی که اینجا آوردم دقیقا ترجمه آزاد از مستند این بسته است:


بسیار متداول است که برای استفاده از داده‌هایی که کاربر وارد می‌کند نیاز به خواندن مقدار از Input html (یا TextArea یا Selection) دارید. در حقیقت باید مقادیر موجود در کنترلرهای Form را باید استخراج کنید و از انها در پردازش‌های خودتان استفاده کنید. این کار همواره در فرم‌ها استفاده می‌شود. در بسته Owl از یک روش ساده برای انتصاب کردن


class Form extends owl.Component {
  state = useState({ text: "" });

  _updateInputValue(event) {
    this.state.text = event.target.value;
  }
}

کد


این کارها. با این حال، این به کمی کد لوله کشی نیاز دارد. همچنین، در صورت نیاز به تعامل با یک چک باکس، یا با دکمه‌های رادیویی یا با برچسب‌های انتخابی، کد لوله‌کشی کمی متفاوت است.

برای کمک به این وضعیت، Owl یک مدل t دستورالعمل داخلی دارد: مقدار آن باید یک مقدار مشاهده شده در مؤلفه باشد (معمولا state.someValue). با دستور t-model می‌توانیم یک کد کوتاه‌تر، معادل مثال قبلی بنویسیم:


class Form extends owl.Component {
  state = { text: "" };
}



دستورالعمل t-model با ، ، ،


   
Text in an input:

   
Textarea:

   
Boolean value:

   
Selection:
       
   

   

        Selection with radio buttons:
       
           
           
       

       
           
           
       

   


مانند مدیریت رویداد، دستورالعمل t-model اصلاح کننده های زیر را می پذیرد:


Modifier Description
.lazy update the value on the change event (default is on input event)
.number try to parse the value to a number (using parseFloat)
.trim trim the resulting value


برای نمونه:


این اصلاح کننده ها را می توان ترکیب کرد. به عنوان مثال، t-model.lazy.number فقط هر زمان که تغییر انجام شود یک عدد را به روز می کند.

توجه: زمین بازی آنلاین یک مثال برای نشان دادن نحوه عملکرد آن دارد.






آواتار
انصراف