ReactJS - Etkinlikler

Bu bölümde olayları nasıl kullanacağımızı öğreneceğiz.

Basit Örnek

Bu, yalnızca bir bileşen kullanacağımız basit bir örnektir. Sadece ekliyoruzonClick tetikleyecek olay updateState düğme tıklandığında işlev görür.

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

Bu, aşağıdaki sonucu verecektir.

Çocuk Etkinlikleri

Güncellememiz gerektiğinde state alt bileşeninden bir olay işleyicisi oluşturabiliriz (updateState) ana bileşende ve bir destek olarak aktarın (updateStateProp) diyebileceğimiz alt bileşene.

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

Bu, aşağıdaki sonucu verecektir.