رویداد(Events) مربوط به ReactJS

رویدادها(Events) مربوط به 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'));

این کد نتیجه ی زیر را به همراه دارد.

رویدادهای فرزند

ما باید حالت جزء مادر را از فرزند آن به روز رسانی کنیم. می توانیم مدیریت کننده ی رویدادی را (updateState) در جزء مادر ایجاد کنیم و آن را به عنوان یک ویژگی (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'));

این کار نتیجه ی زیر را به همراه دارد.

برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .