React Callback

Data Binding Nedir
Açıklaması şöyle.

Data binding is the process of synchronizing data between the model (business logic) and the view (UI). There are two basic implementations of data binding: one-directional and two-directional. The difference between one- and two-way data binding lies in the process of model-view updates.
...
React uses one-way, or downward, data binding. One-way data flow doesn’t allow child elements to affect the parent elements when updated, ensuring that only approved components change. This type of data binding makes the code more stable, but requires additional work to synchronize the model and view. Also, it takes more time to configure updates in parent components triggered by changes in child components.

One-way data binding in React is generally more predictable, making the code more stable and debugging easier. However, traditional two-way data binding in Angular is simpler to work with.

Class Kodlama
ECMAScript 2015 (ECMAScript 6) ile class'lar şöyle yazılabilir.

class Foo  {
  constructor() {
    this.x = 2;
    this.y = 4;
  };
  
  }
  bar() {
    ...
  }

  baz() {
    ...
  }
}

Event Handler Binding
Açıklaması şöyle.

In ECMAScript 2015 classes you need to bind your methods manually. In fact, all you actually need to bind are event handlers and functions passed down as properties (a.k.a. callbacks).

Açıklaması şöyle.

But event handlers you pass as properties (like onChange or onClick) can come from many sources. They can be even passed from the non-React level by a property of the top-level component. In React.createClass React assumes that they come from your component and binds them automaticaly. But in ES2015 classes you have freedom. Under the hood they are called using the function invocation pattern.
...
That means by default you can’t access properties, state and component methods like setState from event handlers. To do so, you need to bind them explicitly.

The best place to bind your event handlers is your constructor:

Event Handler Binding İçin İki Yöntem Var
1. Constructor içinde bind yapmak. Şöyle yaparız.
this.foo = this.foo.bind(this)

2. Arrow function kullanmak. Şöyle yaparız.
foo= ev => this.setState({text: ev.target.value});

Örnek
Elimizde şöyle bir kod olsun.

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      happy: "no"
    };
    this.doSomething = this.doSomething.bind(this);
    this.waitUp = this.waitUp.bind(this);
  }
  waitUp(callback) {
    setTimeout(
      function() {
        this.doSomething(callback);
      }.bind(this),
      3000
    );
  }

  doSomething(callback) {
    this.setState({
      happy: "true"
    }, callback);
  }

  render() {
    return (
      <div>
        <Child parentFunction={this.waitUp} />
        <div>Am I happy ? {this.state.happy}</div>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));

waitUp metodu çağrılınca kendi içindeki doSomething() meotdunu 3 saniye sonra callback parametresi ile tetikliyor.

waitUp metodu Child nesnesine geçiliyor.
Child nesnesi şöyle olsun. Child ilk başta "Something" çıktısını gösterir. Tıklanınca parent'tan gelen waitUp() çağrılır. Bu da timer başlatır ve 3 saniye sonra child'daki callback()'i tetikler.

import ReactDOM from "react-dom";
import React, { Component } from "react";

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      word: "Something"
    };
    this.callBack = this.callBack.bind(this);
    this.doSomethingElse = this.doSomethingElse.bind(this);
  }

  callBack() {
    this.setState({ word: "Something else !!!" });
  }

  doSomethingElse() {
    const { parentFunction } = this.props;

    parentFunction(this.callBack);
  }

  render() {
    const { parentFunction } = this.props;

    return (
      <div>
        <h1 onClick={() => this.doSomethingElse()}>{this.state.word}</h1>
      </div>
    );
  }
}

export default Child;