الأحداث في 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'));

سيتم إنتاج النتيجة التالية.

أنشطة الأطفال

عندما نحتاجstateعندما يتم تحديث المكونات الفرعية للوالد، يمكن إنشاء معالج أحداث في المكونات الأم.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'));

سيتم إنتاج النتيجة التالية.