javascript - Modal 内的 slider 不起作用 - React + Material UI

Question

我正在尝试在 MUI 模式组件中附加自定义 slider 组件。

我的 slider 在故事书上工作得很好，这是预期的行为:

但是当我将它添加到 Material UI 模态中时，这是行为:

我真的不知道会发生什么......我已经尝试使用另一个 slider 库制作我的自定义模式(没有 MUI)并且它们的行为都相同。

当我尝试在模态上移动 slider 时收到此警告:

Slider.js:770 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. 
Consider marking the event handler as 'passive' to make the page more responsive. 
See https://www.chromestatus.com/feature/5745543795965952

这是我的 slider 代码(强调一下，它在模态之外工作得很好:

import React from "react";
import {
  styled,
  Grid,
  Slider as MUISlider,
  InputBase,
  Tooltip,
} from "@material-ui/core";

const CustomSlider = styled(MUISlider)(({ theme }) => ({
  color: theme.palette.secondary.light,
  width: 86,
}));

const GasInput = styled(InputBase)(({ theme }) => ({
  color: theme.palette.secondary.light,
  width: 48,
  height: 32,
  border: "1px solid #ECEFF3",
  borderRadius: 4,
  background: "#FAFCFF",
  fontSize: 12,
  boxSizing: "border-box",
  padding: 12,
}));

const SliderContainer = styled(Grid)({
  width: 200,
  height: 20,
  marginTop: -10,
});

const Input = styled(Grid)({
  paddingLeft: 8,
});

export interface SliderProps {
  value: number;
  min: number;
  max: number;
  onChangeValue: (value: number) => void;
}

interface Props {
  children: React.ReactElement;
  open: boolean;
  value: number;
}

function ValueLabelComponent(props: Props) {
  const { children, open, value } = props;

  return (
    <Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
      {children}
    </Tooltip>
  );
}

export function Slider({ min, max, value, onChangeValue }: SliderProps) {
  const handleSliderChange = (
    _: React.ChangeEvent<unknown>,
    value: number | number[]
  ) => {
    onChangeValue(Number(value));
  };

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onChangeValue(parseInt(event.target.value, 10));
  };

  return (
    <SliderContainer
      container
      direction="row"
      alignItems="center"
      justify="flex-end"
    >
      <Grid item>
        <CustomSlider
          ValueLabelComponent={ValueLabelComponent}
          min={min}
          max={max}
          value={value}
          onChange={handleSliderChange}
        />
      </Grid>
      <Input item>
        <GasInput type="number" value={value} onChange={handleInputChange} />
      </Input>
    </SliderContainer>
  );
}

Answer 1

我创建了 an example使用你的代码。一切似乎都按预期工作。将您的本地代码与该代码进行比较。