Блог

Главная - Вопросы по программированию - Функция React со стрелкой карри в обработчиках событий

Функция React со стрелкой карри в обработчиках событий

#javascript #reactjs

Вопрос:

Как react знает, чтобы предоставить событие в качестве второго аргумента в приведенном ниже коде?

 const clickMe = (parameter) => (event) => {
        event.preventDefault();
        // Do something
}
    
<button onClick={clickMe(someParameter)} />

Генерирует ли он это, чтобы:

 <button onClick={(event) => clickMe(someParameter)(event)} />

Или как это работает?
Спасибо.

Комментарии:

1. Это не проблема реакции, это просто то, как работает JavaScript. clickMe возвращает функцию, которая принимает один event аргумент. Это та функция, которая используется в качестве прослушивателя onClick . И когда onClick вызывается, он передает событие в качестве первого аргумента этой функции.

2. Согласитесь, чтобы @Andy добавил к этому. Технически это не каррирование, а блок каррирования, который является функциями более высокого порядка. В основном функция возвращает функцию (или принимает функции в качестве аргумента)

3. См. также: developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

4. Но первый аргумент есть parameter , а не event так, как он обрабатывает его в качестве второго аргумента?

Ответ №1:

Может быть, это поможет объяснить это немного лучше.

Замыкания-это функции, Которые переносят информацию (переменные и т. Д.) Из своей локальной среды вместе с ними, когда они возвращаются.

Я буду работать с этим примером без функций со стрелками, так как они могут быть немного обманчивыми.

 // `multplyBy` accepts a number as its argument
// It returns a new function that "remembers" that number
// when it's returned. But that new function *also*
// accepts a number
function multiplyBy(n) {
  return function(n2) {
    return n2 * n;
  }
}

// So `multiplyBy(5)` returns a new function
// which we assign to the variable `five`
const five = multiplyBy(5);

// And when we call `five` with a number we get
// the result of calling 5 * 10.
console.log(five(10));

Если вы замените multiplyBy(n) с clickMe(n) , вы увидите, что получите новую функцию, которая будет использоваться прослушивателем щелчков, и первым аргументом этой функции всегда будет событие.

Ответ №2:

Переменная Clickme в вашем коде-это функция, которая возвращает функцию e => {…}. Поэтому, когда вы указываете так:

 <button onClick={clickMe(someParameter)} />

это эквивалентно

 <button onClick={e => {...} />

которая является основной формой обработчика событий в react

Метки: