آموزش ReactJS – فصل نهم: فرم ها

ری اکت جی اس به سادگی قادر است تا اطلاعات وارد شده توسط کاربر را دریافت کند و بر اساس نیاز برنامه نویس پردازش کند.

یک مثال ساده از ایجاد فرم و کار کردن با اطلاعات ورودی کاربر در ReactJS

در یک مثال عملی قصد داریم یک فرم ایجاد کرده و همزمان با تایپ کردن کاربر در این فرم، اطلاعات تایپ شده را درون یک المان نمایش دهیم.

کدهای زیر را در فایل 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;

کدهای زیر را در فایل index.js قرار دهید:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

برای ایجاد این فرم، ما زمینه ورودی با value = {this.state.data} ساخته ایم. این به ما اجازه می دهد که اطلاعات استیت را بروزرسانی کنیم.

در ادامه از رخداد onChange برای تشخیص تایپ کاربر استفاده کرده ایم. هر زمان که کاربر تایپ کند این رخداد اجرا خواهد شد. مقدار this.updateState برای این رخداد مشخص می کند که هر زمان کاربر تایپ کرد فانکشن updateState اجرا شود.

فانکشن updateState پارامتری به نام e دریافت می کند که در واقع همان element است. این پارامتر به input که کاربر در آن در حال تایپ است اشاره می کند.

در فانکشن updateState دستورات لازم برای آپدیت استیت نوشته شده است. e.target.value حاوی اطلاعات تایپ شده توسط کاربر است.

پس از اجرای مثال بالا یک زمینه برای تایپ کردن نمایش داده خواهد شد که با تایپ کردن در آن، اطلاعات المان زیر آن را تغییر می دهید. مانند تصویر زیر:

یک مثال پیچیده تر از کار کردن با فرم در ReactJS

نگران نباشید، فقط قرار است مثال قبلی را طوری بنویسیم که بتوانیم از کامپوننت ها و پراپ ها برای نمایش داده استفاده کنیم.

کد های زیر را درون 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;

فایل index.js شبیه مثال قبلی خواهد بود.

با اجرای مثال بالا همان چیزی را مشاهده می کنید که در مثال قبلی دیدید. فقط کمی تغییرات در نحوه نگارش وجود داشت که کد ها را به نوعی حرفه ای تر می کند!

مثال بالا نشان می دهد شما چگونه می توانید از کامپوننت های درونی برای نمایش و آپدیت یک فرم استفاده کنید.

تنها تغییری که در مثال بالا مشاهده می کنید این است که کامپوننتی به نام Content ایجاد شده است و حاوی همان فرم مثال قبلی و المان چاپ کننده اطلاعات است. اطلاعات فانکشن تغییر دهنده استیت از طریق Prop به این کامپوننت ارسال می شود و این کامپوننت قادر است فانکشن تغییر دهنده که اینجا updateState است را با هر تغییر در input کاربر صدا بزند.