From ها در ری اکت

امید کیانی 397 بازدید 1398/07/14
From ها در ری اکت

فرم ها یک بخش جدایی ناپذیر از هر برنامه ی وب هستند.آنها به کاربران اجازه می دهند تا با برنامه تعامل داشته باشند و اطلاعاتی را از این تعامل دریافت می کنند.

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

ایجاد فرم

react حالت هایی را برای رویکرد واکنش پذیر ساختن یک فرم را ارائه می دهد.در ری اکت فرم ها معمولا توسط کامپوننت های کنترل شده(controlled) پیاده سازی می شوند.

به طور کلی دو نوع ورودی فرم در react وجود دارد:

۱-کامپوننت کنترل نشده (Uncontrolled component)

۲-کامپوننت کنترل شده (Controlled component)

Uncontrolled component

ورودی های کنترل نشده شبیه به ورودی های فرم در html سنتی است که DOM داده های فرم را کنترل می کند.

 عناصر html وضعیت خود را حفظ می کنند و با تغییر مقدار ورودی به روز می شوند.برای نوشتن یک کامپوننت uncontrolled،ما به یک مرجع برای گرفتن مقادیر فرم از DOM نیاز داریم،به عبارت دیگر نیازی نیست برای تغییر هر حالت یک event handler تعریف کنیم.ما از یک مرجع برای دسترسی به مقدار فیلد ورودی فرم از DOM استفاده می کنیم.

در مثال زیر کد ما یک فیلد username و company name را در یک کامپوننت uncontrollerd می پذیرد:

import React, { Component } from 'react';  
class App extends React.Component {  
  constructor(props) {  
      super(props);  
      this.updateSubmit = this.updateSubmit.bind(this);  
      this.input = React.createRef();  
  }  
  updateSubmit(event) {  
      alert('You have entered the UserName and CompanyName successfully.');  
      event.preventDefault();  
  }  
  render() {  
    return (  
      <form onSubmit={this.updateSubmit}>  
        <h1>Uncontrolled Form Example</h1>  
        <label>Name:  
            <input type="text" ref={this.input} />  
        </label>  
        <label>  
            CompanyName:  
            <input type="text" ref={this.input} />  
        </label>  
        <input type="submit" value="Submit" />  
      </form>  
    );  
  }  
}  
export default App; 

خروجی کد بالا به شکل زیر است:

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

 

Controlled Component

در html،عنصر های فرم به طور معمول حالت خود را حفظ کرده و آن را مطابق با ورودی کاربر به روز می کنند.

در کامپوننت های کنترل شده،عناصر ورودی فرم به جای DOM توسط کامپوننت کنترل می شوند.در اینجا حالت های قابل تغییر در state property نگه داشته شده و  تنها با متد ()setState بروزرسانی می شوند.

کامپوننت های کنترل شده دارای توابعی هستند که داده های موجود در آنها را با رویداد onChange هنگامی که بر روی دکمه submit کلیک می کنیم،کنترل می کنند.این داده ها در state ذخیره شده و با متد ()setState بروزرسانی می شوند.این امر باعث می شود تا کامپوننت کنترل بهتری بر عناصر فرم و داده ها داشته باشد.

یک کامپوننت کنترل شده مقدار فعلی خود را از طریق props دریافت کرده و تغییرات را از طریق فراخوانی مجدد مانند رویداد onChange دریافت می کند.یک کامپوننت والد این تغییرات را با بررسی فراخوانی ها و نگهداری آنها درون state خودشان و سپس ارسال مقادیر جدید به عنوان props در کامپوننت های کنترل شده،کنترل می کند.

مثال:

import React, { Component } from 'react';  
class App extends React.Component {  
  constructor(props) {  
      super(props);  
      this.state = {value: ''};  
      this.handleChange = this.handleChange.bind(this);  
      this.handleSubmit = this.handleSubmit.bind(this);  
  }  
  handleChange(event) {  
      this.setState({value: event.target.value});  
  }  
  handleSubmit(event) {  
      alert('You have submitted the input successfully: ' + this.state.value);  
      event.preventDefault();  
  }  
  render() {  
      return (  
          <form onSubmit={this.handleSubmit}>  
            <h1>Controlled Form Example</h1>  
            <label>  
                Name:  
                <input type="text" value={this.state.value} onChange={this.handleChange} />  
            </label>  
            <input type="submit" value="Submit" />  
         </form>  
      );  
  }  
}  
export default App; 

خروجی:

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

کنترل ورودی های متعدد در Controlled Component

اگر بخواهیم چندین عنصر را کنترل کنیم،ابتدا یک name attribute برای هر عنصر در نظر می گیریم و سپس تابع کنترل کننده بر اساس اینکه هر مقدار event.target.name چه کاری را باید انجام دهد،تصمیم می گیرد.

مثال:

import React, { Component } from 'react';  
class App extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {  
            personGoing: true,  
            numberOfPersons: 5  
        };  
        this.handleInputChange = this.handleInputChange.bind(this);  
   }  
   handleInputChange(event) {  
       const target = event.target;  
       const value = target.type === 'checkbox' ? target.checked : target.value;  
       const name = target.name;  
       this.setState({  
           [name]: value  
       });  
  }  
  render() {  
      return (  
          <form>  
              <h1>Multiple Input Controlled Form Example</h1>  
              <label>  
                  Is Person going:  
                  <input  
                    name="personGoing"  
                    type="checkbox"  
                    checked={this.state.personGoing}  
                    onChange={this.handleInputChange} />  
             </label>  
             <br />  
             <label>  
                 Number of persons:  
                 <input  
                 name="numberOfPersons"  
                 type="number"  
                 value={this.state.numberOfPersons}  
                 onChange={this.handleInputChange} />  
             </label>  
         </form>  
     );  
  }  
}  
export default App;

 خروجی:

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

 

دیگر مقالات
حمید تیموری 2779 بازدید 1397/05/14
حمید تیموری 842 بازدید 1397/05/07
امید کیانی 432 بازدید 1398/06/18
حمید تیموری 1291 بازدید 1397/12/22
حمید تیموری 1708 بازدید 1397/06/06


نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید