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

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

reactjs forms 6149 تصویر

فرم ها (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 تصویر

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

در این مثال نحوه استفاده از فرم های موجود در داخل کامپوننت فرزند را بررسی می کنیم. یک مثال شبیه به این در بخش 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 تصویر

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

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

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

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

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

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

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

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

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

آموزش ReactJS

مباحث پایه ReactJS

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

فرم ها (Forms) در ReactJS

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

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

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

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

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

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

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

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

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

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