Javascript 反应材质UI范围滑块值句柄

我有一个范围滑块从材料用户界面。在主页面上，呈现数据表。该表包含以下字段：

id、名称、当前价格、新价格

每个项目的

当前价格

的值固定为某个值。项目的

新价格

的值将根据滑块的值确定。当范围滑块（假设右侧）的一个手柄（表格的特定项目）更改为某个值时，其“更新值”将添加到

当前价格

，该总和将是该特定项目的

新价格

的值。i、 e

项目的新价格=项目的当前价格+收到的项目滑块值

但我在使用范围滑块时面临的问题是，它没有任何id属性或属性来匹配值已更改的处理程序。因此，当任何单个项目的滑块值更改时，它会添加到所有项目

当前价格

字段，而不是所选的特定项目

目前，我正在使用硬编码的id检查，如：

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

但我需要一个通用的解决方案

工作代码段链接：

---

我们感谢您为解决此问题提供的任何帮助。提前感谢。

在App.js中，为每个

提供一个id道具，该道具来自表行数据：

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

另外，不要忘记在函数decleration（App.js）中获取id参数：

---

非常感谢。非常接近。你能帮我再做一件事吗？有没有一种方法可以禁用某个特定的范围按钮，无论是左键还是右键？我认为没有一种方法可以通过默认的滑块拇指来实现这一点。您可以在可能的情况下提供自定义Thumb组件。您可以在“自定义滑块”下看到自定义拇指组件的示例

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

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