فیلم های آموزشی 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
ما باید حالت جزء مادر را از فرزند آن به روز رسانی کنیم. می توانیم مدیریت کننده ی رویدادی را (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 کلیک نمایید .