我正在尝试在 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>
);
}
最佳答案
我创建了 an example使用你的代码。一切似乎都按预期工作。将您的本地代码与该代码进行比较。
关于javascript - Modal 内的 slider 不起作用 - React + Material UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64680792/