React Material UI Range Slider 值句柄

Question

我有一个来自 Material-UI 的范围滑块。在主页上，呈现数据表。该表具有以下字段：

id, name, current price, new price.

每个项目的current price 的值固定为某个值。项目的new price 的值将取决于滑块的值。当范围滑块（假设右侧）的一个（表格中特定项目的）句柄更改为某个值时，其更新后的值将添加到 current price 中，并且该总和将是 @ 987654326@ 用于该特定项目。即

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

但是我面临的范围滑块的问题是它没有任何 id 属性或属性来匹配其值已更改的处理程序。因此，当任何单个项目的滑块值发生更改时，它会添加到所有项目current price 字段而不是选定的特定项目。

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

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

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

工作 sn-p 链接：

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

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

Answer 1

在 App.js 中，为每个 <RangeSlider /> 提供一个 id 道具，您可以从表格行数据中获得该道具：

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

在 RangeSlider.js 中，确保将该 id 发送到 props.setrange 回调：

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

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

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