Дескриптор значения ползунка диапазона пользовательского интерфейса React Material

Question

У меня есть ползунок диапазона из Material-UI. На главной странице отображается таблица данных. В таблице есть следующие поля:

id, name, current price, new price.

Значение current price для каждого из элементов зафиксировано на некотором значении. Значение new price для элемента будет определяться значением ползунка. Поскольку один из маркеров (конкретного элемента таблицы) ползунка диапазона (предположим, правый) изменяется на некоторое значение, его обновленное значение будет добавлено к current price, и эта сумма будет значением для new price для этого конкретного товара. т.е.

item's new price = item's current price + item's slider value received.

Но проблема, с которой я сталкиваюсь с ползунком диапазона, заключается в том, что у него нет свойства или атрибута id, которые соответствовали бы обработчикам, значение которых было изменено. Из-за этого, когда значение ползунка любого отдельного элемента изменяется, оно добавляет ко всем элементам current price поля, а не конкретное выбранное.

На данный момент я использую жестко заданную проверку идентификатора, например:

if (ele.id === 2) {
        returnValue.new_price = ele.current_price + value;
      }

, но мне нужно иметь общее c решение.

Ссылка на рабочий фрагмент:

https://codesandbox.io/s/icy-framework-rxui2?file= / src / App. js : 822-908

Любая помощь для решения этой проблемы приветствуется. Заранее спасибо.

Answer 1

В приложении. js укажите для каждого <RangeSlider /> идентификатор id, который у вас есть из данных строки таблицы:

<RangeSlider id={data.id} setrange={fetchValue} range={range} />

В RangeSlider. js обязательно отправьте этот идентификатор to props.setrange callback:

props.setrange(e.target.textContent, props.id);

Также не забудьте получить аргумент id в функции decleration (App. js):

const fetchValue = (value, id) => {
   ...
}

Изменить невидимый фон