ReactJS - Sự kiện

Trong chương này, chúng ta sẽ học cách sử dụng các sự kiện.

Ví dụ đơn giản

Đây là một ví dụ đơn giản mà chúng tôi sẽ chỉ sử dụng một thành phần. Chúng tôi chỉ thêmonClick sự kiện sẽ kích hoạt updateState hoạt động sau khi nút được nhấp.

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'));

Điều này sẽ tạo ra kết quả sau.

Sự kiện dành cho trẻ em

Khi chúng tôi cần cập nhật state của thành phần mẹ từ thành phần con của nó, chúng ta có thể tạo một trình xử lý sự kiện (updateState) trong thành phần mẹ và chuyển nó như một chỗ dựa (updateStateProp) đến thành phần con mà chúng ta có thể gọi nó.

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'));

Điều này sẽ tạo ra kết quả sau.