Блог

Страница React docs об обработке событий гласит:

 <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
  

В обоих случаях аргумент e, представляющий событие React, будет
передан в качестве второго аргумента после ID . С помощью функции со стрелкой мы
должны передать ее явно, но с помощью bind любые дальнейшие аргументы пересылаются
автоматически.

Итак, при использовании bind событие передается в качестве аргумента обработчику событий в обратном вызове — как / почему это работает?

Вы получите этот ответ, если проверите polyfill for bind, я имею в виду, что именно делает bind.

Bind в основном возвращает новую функцию, всякий раз, когда вы вызываете эту функцию (возвращаемую bind ), она объединяет все параметры (параметр, переданный во время привязки, и параметр, переданный функции, возвращаемой bind), затем передает это исходной функции.

Проверьте это полизаполнение (источник- MDN):

 if (!Function.prototype.bind) (function(){
  var ArrayPrototypeSlice = Array.prototype.slice;
  Function.prototype.bind = function() {
    var thatFunc = this, thatArg = arguments[0];

    // ↓↓↓↓↓↓↓↓↓↓↓ argument bound to function
    var args = ArrayPrototypeSlice.call(arguments, 1);


    if (typeof thatFunc !== 'function') {
      throw new TypeError('Function.prototype.bind - '   'what is trying to be bound is not callable');
    }
    return function(){

      // ↓↓↓↓↓↓↓↓↓↓ check here, this line is basically merging all the arguments
      args.push.apply(args, arguments);


      // ↓↓↓↓↓↓↓↓↓↓ here, it will call the function with particular context and all the parameters
      return thatFunc.apply(thatArg, args);
    };
  };
})();