رویدادها در ReactJS – آموزش ReactJS

شنبه ۱۸ اسفند ۱۳۹۷
بازدید ۱,۴۳۷ نفر
یعثوب سیفی زاده
(5 امتیاز از 1 رای)
Loading...

تصویر reactjs-events_6151 رویدادها در ReactJS - آموزش ReactJS

رویدادها در ReactJS

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

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'));

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

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

مثال فوق خروجی زیر را تولید خواهد کرد:

تصویر reactjs-events_6151_1 رویدادها در ReactJS - آموزش ReactJS

رویدادهای فرزند (Child Events)

زمانی که نیاز داشته باشیم تا state کامپوننت والد را از داخل کامپوننت فرزند به روز کنیم، می توانیم یک event handler ایجاد کنیم سپس آن را به عنوان props به کامپوننت فرزند ارسال کنیم.

محتوای فایل 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;

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'));

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

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

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

تصویر reactjs-events_6151_2 رویدادها در ReactJS - آموزش ReactJS

ReactJS - استفاده از Refs ReactJS - فرم ها (Forms)

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

آموزش پایتون برای یادگیری ماشین (دوره کامل برای مبتدیان)

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

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

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

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

فیلم آموزش WPF در سی شارپ از مقدماتی تا پیشرفته

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

آموزش ReactJS

مباحث پایه ReactJS

رویدادها در ReactJS – آموزش ReactJS

مثال ساده

رویدادهای فرزند (Child Events)

سورس مسئله ۸ وزیر با الگوریتم ژنتیک به زبان سی شارپ

سورس مثلث بندی دلونی (Delaunay) به زبان سی شارپ

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

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

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

سورس ساعت آنالوگ به زبان سی شارپ

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

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