آموزش ReactJS – فصل دهم: رویداد ها (Events)

یک مثال ساده از تشخیص یک رویداد در ReactJS

در این مثال ساده قصد داریم صفحه ای ایجاد کنیم که حاوی یک دکمه و کمی متن باشد. با کلیک بر روی دکمه قرار است متن تغییر کنید.

انجام این کار با استفاده از رویداد onClick انجام خواهد شد. زیرا ما می خواهیم کلیک کاربر بر روی دکمه ای را تشخیص دهیم و عملیاتی متناسب با آن اجرا کنیم.

در مثال زیر فانکشن updateState در زمان کلیک بر روی دکمه اجرا خواهد شد و متن درون المان h4 به طبع تغییر استیت، تغییر متن می دهد.

کد های زیر محتوای فایل 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() {
      this.setState({data: 'Data updated...'})
   }
   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

فصل 10 – مثال 1 : فایل App.jsx

کد های زیر محتوای فایل index.js است:

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

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

فصل 10 – مثال 1 : فایل index.js

پس از اجرای مثال بالا صفحه ای مانند تصویر زیر نمایش داده خواهد شد و شما با کلیک بر روی دکمه قادر هستید، متن زیر آن را که درون المان h4 قرار دارد، تغییر دهید.

یک مثال پیچیده تر، تشخیص یک رویداد از یک کامپوننت داخلی

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

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

در مثال زیر ما فانکشنی به نام updateStateProp ساخته ایم و به عنوان پراپ آن را در اختیار کامپوننت Content قرار داده ایم. کامپوننت Content در هنگامی که با رویداد onClick بر روی دکمه مواجه می شود این متود updateStateProp که از پراپ آمده است را به صورت this.props.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() {
      this.setState({data: 'Data updated from the child component...'})
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

فصل 10 – مثال 2 : فایل App.jsx

فایل index.js حاوی همان کد های مثال قبلی خواهد بود. پس از اجرای مثال و باز شدن صفحه ری اکت در مرورگر، با کلیک بر روی دکمه با صفحه ای شبیه آن چیزی که در تصویر زیر آمده است مواجه خواهید شد: