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

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

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

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

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