فرم ها (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;

محتوای فایل main.js:

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

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

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

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

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