01.07. Olay işleme ve State

Sözdizimsel olarak farklılıklar olsa da bir olayı (event) işleme HTML’de klasik Javascript olay işlemeye çok benzerdir. Bu bölümde çok temel bir olay işlemi olan click üzerinde durulacaktır.

Öncelikle basit bir HTML kod ile başlayalım.

<button onclick="olaytetikle()">
  Tıklama olayı
</button>

Tıklama olayı

</button>

Burada olaytetikle() fonksiyonu klasik bir Javascript kodudur. onclick üzerinden fonksiyon tetiklenir. React sözdizimde ise olay biraz farklıdır.

<button onClick={olayTetikle}> 
Tıklama olayı 
</button>

Tıklama olayı

</button>

Köşeli parantez bir fonksiyonun çağrılacağı anlamına gelir. Birde onclick ifadesindeki aradaki karakter ilk “C” büyük harfle yazılır. Şimdi React tarafında çalışan bir kod yazalım.

class App08 extends Component {
  handleClick() {
    console.log('Tıklandı...');
  }

  render() { return (
    <button onClick={this.handleClick}>
        Tıkla
    </button>
  );
  }
}

export {App01, App02, App03, App04, App05, App06, App07, App08}
export default App08;

class App08 extends Component {

handleClick() {

console.log('Tıklandı...');

}

render() { return (

Tıkla

</button>

);

}

export {App01, App02, App03, App04, App05, App06, App07, App08}

export default App08;

Sonuç tarayıcının Console ekranına yazılır.

Bir bileşenin iç durumlarını tutmak için durumları (state) izlemesi gerekir. Durum mutlaka bileşenin içindedir. “this.state” ifadesini sınıf (bileşen) içindeki duruma ulaşılabilinir. Şimdi basit bir toogle örneği yapalım. (toogle: true’yu false, false’u true yapma durumu)

class App09 extends Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    //Bu bağlama(binding), `this`'in callback çalışmasını sağlamak için gereklidir.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

export {App01, App02, App03, App04, App05, App06, App07, App08, App09}
export default App09;

class App09 extends Component {

constructor(props) {

super(props);

this.state = {isToggleOn: true};

//Bu bağlama(binding), `this`'in callback çalışmasını sağlamak için gereklidir.

this.handleClick = this.handleClick.bind(this);

}

handleClick() {

this.setState(state => ({

isToggleOn: !state.isToggleOn

}));

}

render() {

return (

{this.state.isToggleOn ? 'ON' : 'OFF'}

</button>

);

}

export {App01, App02, App03, App04, App05, App06, App07, App08, App09}

export default App09;

Burada, constructor bir nesne oluşurken çalışan ilk yordamdır. Burada component oluşurken bazı bilgilerin ilk değerlerini set eder. super ifadesi bir üst sınıfa props değerlerini gönderir. this.state durum içinde isToggleOn değişkeni başlangıçta true olarak işaretlenir. Bind metodu diğer çağırma işlemlerinin de çalışabilmesi için kullanılır. setState durumu güncelleme için kullanılır ve burada mevcut durumun tersi ile yeni durum güncellenir(“isToggleOn: !state.isToggleOn”). render bölümünde this.state.isToggleOn bölümü eğer True ise ‘ON’ aksi takdirde ‘OFF’ durumu çalışır (this.state.isToggleOn ? ‘ON’ : ‘OFF’). Bu söz dizimi basit if ifadeleri yazmak için çok kullanışlı bir durumdur.

karşılaştırma ? ‘True’ : ‘False’

Burada karşılaştırma durumundan dönen değere göre ilk veya ikinci bölüm seçilir. ? işaretinden önceki bölüm karşılaştırma sonrası ise sonuçtur. Sonuçlarda “:” birbirinden ayrılır.