Javascript 我的音量滑块功能正常，但按钮只停留在一个位置。为什么？

我在返回上面使用这个函数。div（下面）在返回中。我得到的结果是一个可以正常工作的音量滑块。但是，从视觉上看，滑块按钮从不移动。如何修复此问题以使按钮显示卷的位置

const组件=（）=>{
const setVolume=（e）=>{
audioRef.current.volume=e.target.value/100；
};
返回(
audioMute（）}>静音{”“}
);
};
render（，document.getElementById（“根”））
按钮从不移动，因为其值固定为50。
您可以使用
defaultValue
属性而不是
value
。
值与一起使用，并且应绑定到本地状态。
由于值是可变的，请尝试使用useState钩子将其存储在本地状态中

let [range, setRange] = useState(50)
const setVolume = (e) => {
   setRange(e.target.value / 100)
}

return(
<div className="volumeControl">
    <button onClick={() => audioMute()}>Mute</button>
    <input 
        min={0} 
        max={100} 
        value={range} 
        step={1}
         onChange={setVolume} 
        type="range"
    />
</div>
)


let[range，setRange]=useState（50）
const setVolume=（e）=>{
设置范围（如目标值/100）
}
返回(
audioMute（）}>静音
)

或

我认为您缺少输入元素的ref属性

import { useRef } from 'react';
....
let audioRef = useRef()

   <input 
        min={0} 
        max={100} 
        value={50} 
        step={1}
         onChange={setVolume} 
        type="range"
        ref ={audioRef}
    />

从'react'导入{useRef}；
....
设audioRef=useRef（）
为什么不使用
useState（）
？我认为这对你的情况更好，因为你只需要体积值。也可以在此处设置初始音量<代码>使用状态（50）
。
请尝试以下代码：


const组件=（）=>{
const[volume，setVolume]=React.useState（50）；
常数HandleVolumeMechange=（e）=>{
console.log（如target.value）；
设置音量（如目标值）；
};
返回(
audioMute（）}>静音{”“}
);
};
render（，document.getElementById（“根”））

该值似乎已硬编码为
50
。它不应该使用状态吗？这就解决了它！你真棒。我甚至不知道这个属性的存在。谢谢。第一个答案已经解决了，但我会花些时间研究你的。还有很多东西要学。谢谢你。非常感谢你的帮助。