آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

رویداد(Events) مربوط به ReactJS

دوره های مرتبط با این مقاله

رویدادها(Events) مربوط به ReactJS

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


مثال ساده

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

main.js

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

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

این کد نتیجه ی زیر را به همراه دارد.


رویدادها(Events) مربوط به ReactJS

رویدادهای فرزند

ما باید حالت جزء مادر را از فرزند آن به روز رسانی کنیم. می توانیم مدیریت کننده ی رویدادی را (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() {
      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;

main.js

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

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

این کار نتیجه ی زیر را به همراه دارد.


رویدادها(Events) مربوط به ReactJS

برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .


  • 30
  •    30
  • تاریخ ارسال :   1397/10/19

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .