ReactJs Two-Way Binding

Merhaba arkadaşlar,
“ReactJs Two-Way Binding” konusu üzerine konuşacağız.

Bir önceki yazımızdaReactJs Event Handling” üzerine konuşmuştuk. Event nedir sorusunu cevaplayarak, Reactjs event ‘leri üzerine konuşmuştuk.

ReactJs One-Way Binding

One-way binding kullandığımız model, data, property -artık ne derseniz deyin- gibi veri tutulan değişkenlerin view tarafına aktarımıdır. Adından da anlaşılacağı üzere tek yönlü bir iletimdir. Bu bağlamda,
JSX tarafında kullandığımız {variable}  syntax ‘ı buna en güzel örnektir. Hemen bir örnek yapalım !

import React from 'react';

class App extends React.Component {
  state = {
    data: 'i am dummy data'
  };
  render() {
    return (
      <div>
        <h2>One-Way Binding</h2>
        <p>The data is => {this.state.data}</p>
      </div>);
  }
} 

export default App;

Burada yaptığımız iş kabaca oluşturduğumuz state data ‘sını view tarafında render etmek. Yani veri iletimimiz state ‘den view tarafına doğru ve tek yönlü. Ve ilettiğimiz veriye ait değişimler herhangi bir şekilde arka taraftan dinlenmiyor. Kısaca One-way binding ‘e değindikten sonra asıl konumuz olan Two-way binding ‘e geçebiliriz.

 

ReactJs Two-Way Binding Nedir ?

 

Binding progress
Resim 1 : Veri iletimi

 

Two-way binding ‘de sadece React ‘e has bir olay değil. MVX (model-view-something) mimarisinde sıkça kullanılan bir yöntemdir. View tarafına aktardığımız model, data, property, state vs. aslında arka taraftan da dinlenmektedir. Bu değişikliklerin hem view => data hem de data => view yönünde iletimesi durumuna (kısaca data <=> view) Two-Way binding denir. Kısaca farklara bakacak olursak:

one-way vs two-way binding
Resim 2 : One-way ve Two-way binding arasındaki farklar.

 

Sıcağı sıcağına bir örnekle olayı pekiştirelim.

import React from 'react';
import './App.css';

class App extends React.Component {
  state = {
    oneWayColor: 'red',
    oneWayColor1: 'blue',
    twoWayText: 'two-way-binding...'
  };

  textChanged = (event) => {
    console.info('Text Changed =>', event.target.value);
    this.setState({ twoWayText: event.target.value });
  };

  clickHandler = () => {
    console.log('Color will be changed !');
    this.setState({
      oneWayColor: this.state.oneWayColor === 'red' ? 'blue' : 'red',
      oneWayColor1: this.state.oneWayColor1 === 'red' ? 'blue' : 'red'
    });
  }

  render() {
    return (
      <div className="center">
        <hr />
        <h2>Two-Way Binding</h2>
        <input type="text" value={this.state.twoWayText} onChange={(event) => this.textChanged(event)} />
        <h3> > {this.state.twoWayText}</h3>
        <hr />
        <h2>One-Way Binding</h2>
        <p>The color is => {this.state.oneWayColor}</p>
        <button style={{ backgroundColor: this.state.oneWayColor }} onClick={() => this.clickHandler()}> One Way Color</button>
        <p>The color is => {this.state.oneWayColor1}</p>
        <button style={{ backgroundColor: this.state.oneWayColor1 }} onClick={() => this.clickHandler()}> One Way Color</button>
        <hr />
      </div>
    );
  }
}

export default App;

Özet geçelim,

One-way binding için iki adet değişken tanımladık. (oneWayColor  ve oneWayColor1 ) Bu değişkenleri bir button click event ‘i vasıtasıyla state ‘e göndererek state ‘i güncelledik:

this.setState({ 
  oneWayColor: this.state.oneWayColor === 'red' ? 'blue' : 'red', 
  oneWayColor1: this.state.oneWayColor1 === 'red' ? 'blue' : 'red' 
});

State değişikliği nedeniyle render() metodu tetiklenerek, view tarafına gönderilen veri button  ‘ın backgroundColor  ‘ına basıldı :

<h2>One-Way Binding</h2>
<p>The color is => {this.state.oneWayColor}</p>
<button style={{ backgroundColor: this.state.oneWayColor }} onClick={() => this.clickHandler()}> One Way Color</button>
<p>The color is => {this.state.oneWayColor1}</p>
<button style={{ backgroundColor: this.state.oneWayColor1 }} onClick={() => this.clickHandler()}> One Way Color</button>

Böylece tek yönlü veri aktarımı (One-way Binding) sağlanmış oldu.

Gelelim Two-way binding kısmına:

Yine state içerisinde twoWayText isimli bir değişken tanımladık. Bu değişken input ‘un fırlattığı onChange event ‘i ile state tarafında değeri değiştirildi this.setState({ twoWayText: event.target.value }); . Bu şekilde her input  değişikliği state ‘e aktarılarak ve ardından render()  süreci tetiklenerek çift taraflı bir bağlama işlemi gerçekleştirilmiş oldu.

 

Evveeet… Bir yazımızın daha sonuna geldik. Aklınıza takılan/anlamadığınız konularda aşağıdaki iletişim adreslerinden yazabilir veya yorum bırakabilirsiniz. Umarım fayda sağlayabilmişimdir.

Bir önceki “ReactJs Event Handling adlı yazıma buradan ulaşabilirsiniz.

Bir sonraki yazımızda Lists and Conditions” konusuna giriş yapacağız.

Serinin bir sonraki yazısında görüşmek üzere.

Saygılar sevgiler… Hoşçakalın.

Faydalı Linkler

React ‘e ait türkçe dokümantasyona buradan ulaşabilirsiniz.

 

41

Batuhan Yahşi

Yorum Yaz

Haftalık Bülten

Mobilhanem'de yayınlanan dersleri haftalık mail almak ister misiniz?