如何使用 Material UI 中的滑块更新 mobx 商店

Question

我已经更新了我的代码以使用 MobX，但我无法弄清楚要为 Slider 使用什么。

我店里有：

  lowValue: "200",
  highValue: "2000",
  updateLowValue: lowvalues => {
    store.lowValue = lowvalues
  },

在我的功能组件中：

  const ValueLowSelection = () => {
const store = React.useContext(StoreContext);

return useObserver(() => (
  (
    <>
      <Typography id="discrete-slider-small-steps" gutterBottom>
        Low Value: {store.lowValue}
      </Typography>
      <Slider
        value={store.lowValue} onChange={changeEvent => 
        {store.updateLowValue(changeEvent.target.value)}} 
        aria-labelledby="discrete-slider-small-steps"
        step={10}
        min={0}
        max={1000}
        valueLabelDisplay="auto"
      /></>
  ))
)}

当我将它全部切换回状态时，它工作得很好，但现在它显示为 NaN。我错过了什么？

谢谢

** 编辑 ** https://codesandbox.io/s/quirky-mccarthy-fnup1 Link 到 CodeSandbox

Answer 1

如果您检查 onChange function signature in the documentation，您会看到 onChange 函数的第二个参数就是您想要的值。

<Slider
  value={store.lowValue}
  onChange={(event, value) => {
    store.updateLowValue(value);
  }}
  aria-labelledby="discrete-slider-small-steps"
  step={10}
  min={0}
  max={1000}
  valueLabelDisplay="auto"
/>

如何使用 Material UI 中的滑块更新 mobx 商店

How to update mobx store using a slider from Material UI

reactjs

material-ui

slider

mobx