Material UI React Slider 组件在移动设备上不起作用答案

【问题标题】：Material UI React Slider Component Not Working on mobileMaterial UI React Slider 组件在移动设备上不起作用
【发布时间】：2021-02-07 06:42:01
【问题描述】：

我一直在尝试将 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>
    )
}

【问题讨论】：

标签： javascript reactjs material-ui slider

【解决方案1】：

在这个问题上花了 2 天时间，创建了一个示例项目，尝试重新创建问题，结果证明是一个简单的修复。父组件有一个表单，我用于表单的键是

Date().getTime()

这就是导致滑块出现问题的原因。我的猜测是它会随着每个滑块值的变化而重建整个表单。这使得滑块 UI 以这种方式运行。使用适当的密钥解决了这个问题。我现在在两个键值之间切换。

【讨论】：