我的音量滑块起作用，但按钮只停留在一个地方。为什么？

Question

我在 return 之上使用此功能。 div（下）在 return 中。我得到的结果是一个起作用的音量滑块。但是，从视觉上看，滑块按钮永远不会移动。我该如何解决这个问题，让按钮显示音量在哪里？

const Component = () => {
  const setVolume = (e) => {
    audioRef.current.volume = e.target.value / 100;
  };

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

ReactDOM.render(<Component />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

按钮永远不会移动，因为它的值固定为 50。您可以使用 defaultValue 属性代替 value。值与 controlled component 一起使用，应绑定到本地状态。

Answer 2

由于值是可变的，请尝试使用 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>
)

或

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

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

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

Answer 3

你为什么不用useState()？我认为这对您的情况更好，因为您只需要音量值。您也可以在那里设置初始音量。 useState(50)。试试这个代码：

const Component = () => {
  const [volume, setVolume] = React.useState(50);
  const handleVolumeChange = (e) => {
    console.log(e.target.value);
    setVolume(e.target.value);
  };

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

ReactDOM.render(<Component />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

我的音量滑块起作用，但按钮只停留在一个地方。为什么？

My volume slider functions but the button just stays in one place. Why?

javascript

events

jsx

reactjs

react-hooks