使用狀態來控制

Question

我使用一個按鈕來控制音頻播放器靜音，但它使播放器默認靜音，我只想在單擊時靜音。如何編輯它

import React, { useState } from "react";
import ReactAudioPlayer from "react-audio-player";

const Test = () => {
  const [ismute, setOpen] = useState(false);
  return (
    <><div>
      <ReactAudioPlayer
        controls
        muted={ismute ? "false": "True"}
        src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
        loop
        autoPlay
         />
    </div><button onClick={() => setOpen(!ismute)}>click me!</button>
    </>
  );
};

export default Test

Answer 1

如果您作為string傳遞，

muted={ismute ? "false": "True"}

因為ismute的初始值是false的：

const [ismute, setMute] = useState(false);

那么你將作為道具傳遞的內容是True或false是truthy值，這使ismute始終靜音

對於狀態 ismute，最初分配值 true 而不是 false，如下所示：

const [ismute, setOpen] = useState(true);

您應該將muted prop 作為true或false傳遞。 你作為一個字符串傳遞

muted={ismute ? false: true }

I've created a simulation for player

Answer 2

對於狀態 ismute，最初分配值 true 而不是 false，如下所示：

const [ismute, setOpen] = useState(true);

另一個更正可能是組件ReactAudioPlayer ：

<ReactAudioPlayer
    controls
    muted={ismute}
    src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
    loop
    autoPlay
     />