بخش های اصلی

آموزش ReactJS

ReactJS – رویدادها (Events)

در این بخش نحوه ی استفاده از رویدادها (events) را توضیح میدیم.

یک مثال ساده

در این مثال ساده فقط از یک کامپوننت استفاده می کنیم و فقط رویدادِ 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'));

خروجی کد بالا بصورت زیرِه:

react events simple

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

اگه بخواین state مربوط به کامپوننتِ والد را در فرزندَش به روز رسانی کنین، می توانید در کامپوننتِ والد، event handler (UpdateState) را ایجاد کنین و آن را مثل یک prop (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'));

خروجی کد بالا بصورت زیر خواهد بود:

react events child

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد