آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

فرم(Forms) در ReactJS

دوره های مرتبط با این مقاله

فرم ها(Forms) در ReactJS

در این بخش می خواهیم به چگونگی استفاده از فرم ها در ReactJS بپردازیم.


مثال ساده از ReactJS

در مثال زیر می خواهیم یک فرم ورودی را به کمک value = {this.state.data} تنظیم کنیم. از این طریق می توانیم هر زمان که مقدار ورودی تغییر می کند، حالت را به روز رسانی کنیم. ما در اینجا از رویداد onChange استفاده کرده ایم. این رویداد تغییرات ورودی را زیر نظر می گیرد و حالت را بر اساس آن به روز رسانی می کند.
App.jsx

import React from 'react';
class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         < div >
            < input type = "text" value = {this.state.data} 
               onChange = {this.updateState} / >
            < h4 >{this.state.data}< /h4 >
         < /div >
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(< App/ >, document.getElementById('app'));

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


فرم ها(Forms) در ReactJS

مثال پیچیده از ReactJS

در مثال زیر چگونگی استفاده از فرم ها از جزء فرزند نشان داده شده است. متد onChange به روز رسانی حالت را فعال می کند. سپس این به روز رسانی به مقدار ورودی فرزند داده می شود و در صفحه نمایش داده می شود. مثال مشابه در بخش رویدادها آورده شده است. هر زمان که نیاز باشد حالت را از جزء فرزند به روز رسانی کنیم، باید تابعی که به روز رسانی (updateState) را به صورت یک ویژگی (updateStateProp) مدیریت می کند را عبور دهیم.
App.jsx

import React from 'react';
class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         < div >
            < Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState} >< /Content >
         < /div >
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         < div >
            < input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} / >
            < h3 >{this.props.myDataProp}< /h3 >
         < /div >
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(< App/ >, document.getElementById('app'));

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


فرم ها(Forms) در ReactJS

برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .


  • 238
  •    198
  • تاریخ ارسال :   1397/10/18

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .