React Beginner Вопрос: Пример функции запутанной стрелки

Question

Я новичок в React / ES6, и я использую этот код, который я нашел для обработки флажка внутри пользовательского компонента, по которому щелкают (пользовательский компонент включает CheckBox-материал-пользовательский интерфейс, отсюда и значение «флажок»).Я планирую добавить дополнительные поля в пользовательский компонент, например текстовое поле, соответствующее флажку, где пользователь может добавить больше информации о флажке, который он установил.

В любом случае, я немного запуталсячто происходит в этой первой строке.Я надеялся, что один из вас, высокопоставленных разработчиков, сможет мне помочь, чтобы я мог понять, что здесь происходит.

Обратите внимание на две вещи:

1. индексная консоль регистрирует как целочисленное значение (позиция в моем отображенном массиве)

2. по умолчанию установлено false, но консольрегистрируется как true (правда, как-то переключается?)

   const onMediaDeliverableChange = index => ({ target: {checked} }) => {
   
   console.log('>> [form.js] (onMediaDeliverablesChange) index =  ',index);
   console.log('>> [form.js] (onMediaDeliverablesChange) target =  ',checked); }
   

Вот пример кода, из которого я взял это, который работает.

const onCheckBoxChange = index => ({ target: { checked } }) => {
    const newValues = [...values];
    const value = values[index];
    newValues[index] = { ...value, checked };

    console.log('>> [form.js] (onCheckBoxChange) value = ',value, index);
    console.log('>> [form.js] (onCheckBoxChange) newValues[index] = ',newValues[index]);

    props.setDesignOrDigital(newValues);

  };

Answer 1

следующее:

const onCheckBoxChange = index => ({ target: { checked } }) => {
  // stuff
};

также может быть записано как:

const onCheckBoxChange = index => (event) => {
  const checked = event.target.checked;
  // stuff
};

{ target: { checked } } является примером использования деструктуризации объекта в аргументе функции. В этом случае аргументом будет событие.

Первая часть:

index => another-function

, как уже упоминалось в комментариях, является примером функции с карри. Я предполагаю, что onCheckBoxChange использовался в цикле, где передавался индекс отображаемого флажка, который затем возвращает функцию, которая является обработчиком события для события изменения. index затем используется для получения / установки отмеченного состояния для соответствующих флажков.