Блог

Я обновил свой код для использования MobX, но у меня возникли проблемы с определением того, что использовать для слайдера.

в магазине у меня есть:

   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 Ссылка на CodeSandbox

Если вы проверите onChange сигнатуру функции в документации, вы увидите, что вторым аргументом, заданным 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"
/>