Javascript 模态内部的滑块不工作-反应+；材料界面

我试图在MUI模态组件中附加自定义滑块组件

我的滑块在一本故事书上运行得非常好，这是预期的行为：

但当我将其添加到Material UI模式时，这是一种行为：

我真的不知道会发生什么。。。我尝试过使用另一个滑块库创建自定义模式（没有MUI），它们的行为都是一样的

当我尝试在模式上移动滑块时，收到以下警告：

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

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>
  );
}

这是我的滑块代码（为了强调这一点，它在模态的之外工作得很好：

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

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>
  );
}

从“React”导入React；
进口{
风格，
网格，
滑块作为MUISlider，
输入基，
工具提示，
}来自“@材料界面/核心”；
const CustomSlider=styled（MUISlider）（{theme}）=>({
颜色：theme.palete.secondary.light，
宽度：86，
}));
const GasInput=styled（InputBase）（（{theme}）=>({
颜色：theme.palete.secondary.light，
宽度：48，
身高：32，
边框：“1px实心#ECEFF3”，
边界半径：4，
背景：“FAFCFF”，
尺寸：12，
框大小：“边框框”，
填充：12，
}));
const SliderContainer=已设置样式（网格）({
宽度：200，
身高：20，
玛金托普：-10，
});
常量输入=样式化（网格）({
paddingLeft:8，
});
导出接口幻灯片{
值：数字；
min：编号；
最大：数量；
onChangeValue:（值：number）=>void；
}
界面道具{
儿童：React.React元素；
开放：布尔；
值：数字；
}
函数值LabelComponent（道具：道具）{
const{children，open，value}=props；
返回(
{儿童}
);
}
导出函数滑块（{min，max，value，onChangeValue}:SliderProps）{
常量handleSliderChange=(
_：React.ChangeEvent，
值：数字|数字[]
) => {
onChangeValue（数字（值））；
};
常量handleInputChange=（事件：React.ChangeEvent）=>{
onChangeValue（parseInt（event.target.value，10））；
};
返回(
);
}

我是用你的代码创建的。一切似乎都按预期运行。请将你的本地代码与之进行比较。

多亏了@jack.benson answer，我才能够了解到底发生了什么（非常感谢先生）

我创建了一个模态组件，它抽象了模态的主要内容，我将在整个应用程序中使用：

import React from "react";
import { Modal as MUIModal, Box, styled } from "@material-ui/core";

interface ModalProps {
  width: number;
  height: number;
  children: React.ReactNode;
  open: boolean;
}

export function Modal({ width, height, children, open }: ModalProps) {
  const ModalContainer = styled(MUIModal)({
    height,
    width,
    margin: "auto",
    borderRadius: 12,
  });

  const ModalBox = styled(Box)({
    height,
    width,
    background: "#FFFFFF",
    borderRadius: 12,
    outline: "none",
  });

  return (
    <ModalContainer open={open}>
      <ModalBox>{children}</ModalBox>
    </ModalContainer>
  );
}

---

是的，这是因为当它在模态之外时，它会像预期的那样工作，但如果你在模态组件内部添加代码，它就会中断@jack.bensonI更新了示例以使用模态，似乎仍然可以工作。哦，我的天啊。你是对的，先生。之所以会出现这种奇怪的行为，是因为我在我制作的模态内部使用了

样式化的
。我将创建一个带有确切错误的答案