Etkileşimli Component

Square componentine tıkladığınızda bir “X” işareti dolduracak şekilde güncelleyelim. Square componentinde render() fonksiyonunu şöyle değiştirmeyi deneyin:

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => alert('tıklandı')}>
        {this.props.value}
      </button>
    );
  }
}

Bir kareye tıklarsanız, tarayıcınızda alert (uyarı) almanız gerekiyor.

Burada JavaScript ok fonksiyon syntaxı kullanılmıştır. Fonksiyonu onClick propsu olarak geçtiğimizi unutmayın.

Normalde click change gibi olaylarda bind etmek gerekiyor fakat ok fonksiyonu ve bazı diğer yöntemleri kullanarak constructorde bind etmedende click ve change’i kullanabiliyoruz. Detaylar için click ve change olayları başlığına bakabilirsiniz.

OnClick = {alert ('tıklandı')} olarak yazsaydık, click yapmak yerine sadece uyarırdı.

React componentleri, constructorde this.statee sahip olabilirler; bu component için özel olarak düşünülmelidir. Kareye tıklatıldığında değişmesini sağlayalım.

İlk önce, state’i başlatmak için classa bir constructor ekleyin:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('tıklandı')}>
        {this.props.value}
      </button>
    );
  }
}

JavaScript classlarında, bir alt clasın constructorünü tanımlarken, super();i çağırmanız gerekir.

Şimdi ise click yapıldığında karede X yazması için state’i güncelleyecek şekilde kodumuzu değiştirelim.

• this.props.valueu this.state.value ile <button> etiketinin içinde değiştirin.

Önceki halinde üst componentten parametre alıyorduk fakat artık state’teki değeri alacağımız için props yerine state kullanmalıyız.

• () => alert()ı () => this.setState({value: 'X'}) olacak şekilde değiştirin.

Daha sonra X ve O yazması için gerekli kodları ekleyeceğiz. Şimdilik her click yapıldığında stateteki valueyu X olacak şekilde güncelliyoruz. State güncellendiğinde component tekrardan render edildiği için güncel değeri karenin içerisine yazacaktır.

Şimdi <button> tagımız şu şekilde görünmelidir:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>
        {this.state.value}
      </button>
    );
  }
}

this.setState çağrıldığında, component için bir güncelleme planlanır ve componenti alt öğeleri ile birlikte yeniden render edilmesine neden olur. Component yeniden render edildiğinde, this.state.value X olur, böylece karede bir X görürsünüz.

Herhangi bir kareyi tıklarsanız, içinde bir X görünmelidir.

Mevcut kodu görüntüleyin

Sıradaki Eğitim: Veriyi Korumanın Önemi