رویدادها در 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

آشنایی با کامپوننت های کاربردی Vue

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

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

فیلم آموزش JQuery (جی کوئری)

فیلم آموزش AngularJS (انگولار جی اس) به زبان فارسی

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

آموزش جاوا اسکریپت (JavaScript) در قالب فیلم آموزشی

آموزش ReactJS

مباحث پایه ReactJS

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

مثال ساده

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

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

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

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

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

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

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

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

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