Слайдер Material-UI - Назначение значения из состояния при нажатии кнопки - PullRequest
Новая
       26

Слайдер Material-UI - Назначение значения из состояния при нажатии кнопки

0 голосов
/ 05 марта 2020

Я создал компонент слайдера следующим образом 

 <Slider
        track="normal"
        /* value={
          typeof stateValue === "number"
            ? parseFloat(stateValue.toFixed(4))
            : min
        } */
        min={min}
        max={max}
        valueLabelDisplay="auto"
        valueLabelFormat={x => x.toFixed(4)}
        step={step ? step : (max - min) / 100}
        onChangeCommitted={handleSliderChange}
        aria-labelledby={global}
        color="secondary"
        marks={theMarks}
      />

После onChangeCommitted я изменяю предварительную переменную состояния, которая налагает изменения на другие компоненты.

Ожидается: При нажатии кнопки «Применить» я сохраняю заданное значение в состоянии (! = Предварительное состояние). Если после перетаскивания ползунка к другому значению нажимается кнопка «Отменить», значение ползунка должно вернуться к значению состояния. Это работает для входных данных, приведенных ниже. 

      <Input
        className="width-44-px"
        disableUnderline={true}
        value={stateValue ? parseFloat(stateValue.toFixed(4)) : min}
        margin="dense"
        onChange={handleInputChange}
        onBlur={handleBlur}
        inputProps={{
          step: step ? step : (max - min) / 100,
          min: min,
          max: max,
          type: "number",
          "aria-labelledby": global
        }}
      />

Но это не работает для ползунка, поскольку мне пришлось прокомментировать свойство value, чтобы иметь возможность анимировать ползунок во время перетаскивания.

Что Я хочу: ползунок анимировать при перетаскивании, а также вернуться к значению состояния при нажатии кнопки «Отменить».

...