React Material UI Range Slider 值句柄

Question

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

id, name, current price, new price.

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

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;

      }

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

工作片段链接：

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

任何解决此问题的帮助表示赞赏。提前致谢。

Answer 1

在 App.js 中，为每个提供<RangeSlider />一个 id 道具，您可以从表格行数据中获得该道具：<RangeSlider&nbsp;id={data.id}&nbsp;setrange={fetchValue}&nbsp;range={range}&nbsp;/>在 RangeSlider.js 中，确保将该 id 发送到props.setrange回调：props.setrange(e.target.textContent,&nbsp;props.id);也不要忘记在函数 decleration (App.js) 中获取 id 参数：const&nbsp;fetchValue&nbsp;=&nbsp;(value,&nbsp;id)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;...}