Material UI React 滑块组件无法在移动设备上运行

Question

我一直在尝试将 Slider 组件添加到反应项目中。功能明智，它工作正常，但我有两个问题，我无法摆脱

1. 滑块的变化值不平滑。拖动不能正常工作，它只是拖动到最接近的值然后停止。

2. 在移动设备上更糟，根本没有拖动，我必须点击滑块移动的确切位置。

我确实发现了问题，我正在使用 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>

    )

}

Answer 1

在这个问题上花了 2 天时间，创建了一个示例项目，试图重现这个问题，结果证明这是一个简单的修复。父组件有一个表单，我用于表单的键是Date().getTime()这就是导致滑块出现问题的原因。我的猜测是它会随着每个滑块值的变化而重建整个表单。这使得滑块 UI 以这种方式运行。使用适当的密钥解决了这个问题。我现在在两个键值之间切换。