我一直在嘗試將 Slider 組件添加到反應項目中。功能明智,它工作正常,但我有兩個問題,我無法擺脫滑塊的變化值不平滑。拖動不能正常工作,它只是拖動到最接近的值然后停止。在移動設備上更糟,根本沒有拖動,我必須點擊滑塊移動的確切位置。我確實發現了問題,我正在使用 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> )}
Material UI React 滑塊組件無法在移動設備上運行
慕勒3428872
2023-06-09 15:19:35