Как правильно обрабатывать контролируемый компонент реакт?

Question

[Артур]

Все привет, подскажите как лучше обрабатывать контролируемый компонент в реакте?

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

обработчик чекбокса выглядит так

limitSwitchHandler = rowId => {
    this.setState(({data}) => {
      const idx = data.findIndex(el => el.id === rowId);
      const oldRow = data[idx];
      const newRow = {...oldRow, autoLimit: !oldRow.autoLimit};

      const newArray = [
        ...data.slice(0, idx),
        newRow,
        ...data.slice(idx + 1),
      ];
      return {
        data: newArray,
      }
    });
  };

затем в компоненте я вызываю ее так

<Switch
  checked={element.autoLimit}
  onChange={() => this.limitSwitchHandler(row.id)}
/>;

Но когда дело дошло до инпута, не понял как получить его value с таким подходом. И вычитал что создавать функцию каждый раз не хорошо, а лучше делать так, тут взять value удалось
onChange={this.limitSwitchHandler}

но как тогда мне по простому понять в какой строке произошли изменения? держать в дата атрибуте id строки?

__________
UPDATE
решил задачу так

limitPerDayHandler = (rowId) => (e) => {
    e.persist();
    console.log(e.target.value);
    this.setState(({data}) => {
      const idx = data.findIndex(el => el.id === rowId);
      const oldRow = data[idx];
      const newRow = {...oldRow, limitPerDay: e.target.value};

      const newArray = [
        ...data.slice(0, idx),
        newRow,
        ...data.slice(idx + 1),
      ];
      return {
        data: newArray,
      }
    });
  };

с вызовом компоненте инпута так

<TextInput
          name="limitPerDay"
          value={element.limitPerDay}
          onChange={this.limitPerDayHandler(element.id)}
        />;

но не совсем понял как и почему мне помогло e.persist();

Answer 1

[Антон Спирин]

Синтетические события нельзя использовать асинхронно, e.persist() освобождает событие из пула и оно не очищается, поэтому все значения сохраняются на момент выполнения асинхронного вызова.

Ваша задача решалась так:

onChange={(e) => this.limitSwitchHandler(e, row.id)}

В вашем решении правильней назвать хандлер:

createLimitPerDayHandler = (rowId) => (e) => { ... };

так как технически вызов не является хандлером, а возвращает его.