React Material UI Range Slider 值句柄

Question

我有一个来自 material-UI 的范围滑块。在主页上，呈现数据表。该表具有以下字段：id, name, current price, new price.每个项目的值current price固定为某个值。该new price项目的值将取决于滑块的值。当范围滑块（假设右侧）的一个（表格的特定项目的）句柄更改为某个值时，其更新的值将被添加到，current price并且该总和将是该new price特定项目的值. IEitem'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 id={data.id} setrange={fetchValue} range={range} />

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

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

也不要忘记在函数 decleration (App.js) 中获取 id 参数：

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