بخش های اصلی

آموزش ReactJS

ReactJS – فرم ها

در این بخش نحوه ی استفاده ی فرم ها در React را توضیح میدیم.

یک مثال ساده

در مثال زیر، یک فرمِ ورودی با value = {this.state.data} ایجاد می کنیم. این فرم این امکان را به ما میده تا هر وقت که مقدار ورودی تغییر کرد، state (وضعیت) را به روز رسانی کنیم. همانطور که میبینین در این مثال از رویدادِ onChange استفاده کردیم که به ترتیب بر تغییرات ورودی و به روز رسانیِ state (وضعیت) نظارت می کنه.

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'));

وقتی مقدار متن ورودی تغییر می کنه، state (وضعیت) به روز رسانی میشه.

react forms simple

یک مثال سخت تر

در این مثال نحوه ی استفاده از فرم ها در کامپوننتِ فرزند (child component) را به شما نشان میدیم. متدِ onChange عمل به روز رسانیِ state (وضعیت) را انجام میده که به value مربوط به ورودیِ فرزند (child input) پاس داده میشه و در خروجی نمایش داده میشه. در بخش "رویدادها" نیز مثالی مشابهِ این مثال آورده شده. هر وقت بخواین state (وضعیت) را از کامپوننت فرزند (child component) به روز  رسانی کنین باید تابعی که عمل به روز رسانی (UpdateState) را بعنوان یک prop (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'));

خروجی کد بالا به صورت زیرِه:

react forms complex

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد