خانه / برنامه نویسی / رویدادها در ReactJS – آموزش ReactJS

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

reactjs events 6151 تصویر

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

محتوای فایل main.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));

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

reactjs events 6151 1 تصویر

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

محتوای فایل main.js:

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 اولین بار در سورس سرا – آموزش برنامه نویسی. پدیدار شد.


لينک منبع

درباره ی admin

همچنین ببینید

توسعه اپلیکیشن های واقعی با اسکالا (Scala)

اسکالا (Scala) یک زبان برنامه ‌نویسی کاربردی شی گرا و تابعی بوده و در زمینه …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *