Material-ui：将滑块重置为默认值 min 和 max答案

【问题标题】：Material-ui: Reset slider to default values of min and maxMaterial-ui：将滑块重置为默认值 min 和 max
【发布时间】：2020-11-26 20:19:53
【问题描述】：

我有一个双面滑块组件，我使用@material-ui/core/Slider 根据他们的documentation on customized slider 创建

这是滑块首次渲染时的样子

当我滑动滑块时，数字会发生变化，这些数字会存储在 redux 中并传递给文本组件，而不是滑块本身，因为我想防止每次数字变化时重新渲染滑块

不过，当我将数字重置为其原始值时，我希望滑块手柄重置为其原始位置。这意味着滑块在重置后看起来与顶部图片中的相同。但是它们不会，这是我尝试重置时滑块的样子。

我在单击按钮时重置我的值。此按钮的 onClick 调度一个将最小值和最大值（文本中的值）设置为默认值的操作。这是我的滑块 onChange 调用的同一个调度程序。我还调用了一个调度程序，它将一个名为 reRender 的值更改为 true，我的滑块应该正在监视它。单击此按钮时也会调用此调度程序。

下面的组件是我的 Slider 组件。有几个部分被注释掉了。如果我取消注释alert('if')，则仅在单击应该重置滑块的按钮后才会显示警报，然后每次调整滑块时都会显示。如果我取消注释， useEffect 什么都不做，而是试图解决这个问题。如果我将let value 更改为let value=[min,max]，那么我的滑块将永久卡在0k 和250k，这意味着设置该值会对滑块句柄产生影响，但是当在 if 块中设置该值时某种原因。

你可以查看一个similar slider at this codesandbox，但是它没有reset按钮，也没有使用redux。

【问题讨论】：

标签： reactjs redux material-ui

【解决方案1】：

我不确定这是否是答案，但我认为您的问题可能与您将值设置为 [min, max] 而不是固定数字有关。

【讨论】：

【解决方案2】：

这是我最近解决的类似问题。如果这是反模式，请有人纠正我！

您可以使用key 属性将组件重置为其初始状态。

let resetCount = 0

export default function App() {
  const [sliderVals, setSliderVals] = useState({})

  // Some state building logic
  //...

  const resetForm = () => {
    resetCount += 1
  }

  return (
    <>
      <SliderComponent key={resetCount} sliderVals={sliderVals} />
      <Button onChange={resetForm} />
    </>
  )
}

【讨论】：