亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Material UI React 滑塊組件無法在移動設備上運行

Material UI React 滑塊組件無法在移動設備上運行

慕勒3428872 2023-06-09 15:19:35
我一直在嘗試將 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>    )}
查看完整描述

1 回答

?
桃花長相依

TA貢獻1860條經驗 獲得超8個贊

在這個問題上花了 2 天時間,創建了一個示例項目,試圖重現這個問題,結果證明這是一個簡單的修復。父組件有一個表單,我用于表單的鍵是

Date().getTime()

這就是導致滑塊出現問題的原因。我的猜測是它會隨著每個滑塊值的變化而重建整個表單。這使得滑塊 UI 以這種方式運行。使用適當的密鑰解決了這個問題。我現在在兩個鍵值之間切換。


查看完整回答
反對 回復 2023-06-09
  • 1 回答
  • 0 關注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號