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

پنجشنبه ۱۶ اسفند ۱۳۹۷
بازدید ۱,۵۵۲ نفر
AmRo
(12 امتیاز از 3 رای)
Loading...

تصویر reactjs-forms_6149 فرم ها (Forms) در ReactJS - آموزش ReactJS

فرم ها (Forms) در ReactJS

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

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

در مثال زیر ما یک فرم ورودی با مقدار {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;

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

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

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

تصویر reactjs-forms_6149_1 فرم ها (Forms) در ReactJS - آموزش ReactJS

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

در این مثال نحوه استفاده از فرم های موجود در داخل کامپوننت فرزند را بررسی می کنیم. یک مثال شبیه به این در بخش Events (رویدادها) نیز استفاده شده است. هر زمان نیاز باشد تا state را از داخل کامپوننت فرزند به روز کنیم، باید تابعی که state را به روز رسانی (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;

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

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

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

تصویر reactjs-forms_6149_2 فرم ها (Forms) در ReactJS - آموزش ReactJS

ReactJS - رویدادها (Events) ReactJS - چرخه حیات کامپوننت ها

دسته ها: آموزش ها - فریم ورک ReactJS

آموزش مقدماتی فریم ورک ReactJS به صورت فیلم آموزشی

آموزش برنامه نویسی PHP از مقدماتی تا پیشرفته (فیلم آموزشی)

آموزش پروژه محور سی شارپ (سیستم ثبت نام و انتخاب واحد دانشجویان)

فیلم آموزش WPF در سی شارپ به صورت پروژه محور | مدیریت بخشنامه تحت شبکه

آموزش سی شارپ به صورت پروژه محور (مدیریت مصالح ساختمانی)

آموزش سی شارپ به صورت پروژه محور (مدیریت فروشگاه)

آموزش سی شارپ به صورت پروژه محور (مدیریت داروخانه)

آموزش ReactJS

مباحث پایه ReactJS

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

فرم ها (Forms) در ReactJS

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

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

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

سورس سیستم مدیریت داروخانه به زبان سی شارپ

سورس تغییر رنگ پس زمینه دسکتاپ در سی شارپ

سورس سیستم مدیریت حمل و نقل به زبان سی شارپ

سورس رسم فرم فاکتور به زبان سی شارپ

آموزش ساخت برنامه دسکتاپ با React و Electron

سورس خواندن اعداد با صدای فارسی در زبان سی شارپ

سورس تبدیل عدد به حروف فارسی در زبان سی شارپ