[英]Material UI React Slider Component Not Working on mobile
我一直在尝试将 Slider 组件添加到 React 项目中。 功能明智它工作正常,但我有两个我无法摆脱的问题
我确实发现了这个问题,我使用的是 onChange,所以当我删除它时,它的工作方式与示例完全一样。 但是我需要更新父组件的状态,所以添加了第 18 行,但是同样的问题又出现了。 我删除了第 18 行,然后所有这些都得到了修复,但我需要第 18 行来调用父组件的函数,以更新其状态变量。
这是我的代码的要点链接https://gist.github.com/kapiljhajhria/0e9beda641d561ef4448abf9195dbcca
import React from "react";
import Slider from "@material-ui/core/Slider";
export default function SliderWithLabel(props) {
const {
labelText, range = {
min: 0,
max: 10
}, step = 1,
// defaultValue = Math.ceil((range.min + range.max) / 2),
handleSliderChange,
name,
value: sliderValue
} = props;
function sliderValuetext(value) {
// handleChange({target: {value: value}});
if(value!==sliderValue)handleSliderChange(value,name)
return `${value}`;
}
return (
<div className="sliderField" style={{display: "flex", flexDirection: "column"}}>
<div>
{labelText}
</div>
<Slider
style={{width: "90%", justifyContent: "center", display: "flex", margin: "auto"}}
defaultValue={sliderValue}
getAriaValueText={sliderValuetext}
aria-labelledby="discrete-slider"
valueLabelDisplay="auto"
// onChange={sliderChange}
step={step}
// name={name}
// onChange={handleChange}
marks
min={range.min}
max={range.max}
/>
</div>
)
}
在这个问题上花了 2 天时间,创建了一个示例项目,尝试重新创建这个问题后,结果证明是一个简单的修复。 父组件有一个表单,我用于表单的键是
Date().getTime()
这就是导致滑块出现问题的原因。 我的猜测是它会随着每个滑块值的变化重建整个表单。 这使得滑块 UI 以这种方式运行。 使用适当的密钥解决了这个问题。 我现在在两个键值之间切换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.