javascript - UseState 来控制

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);

您应该将mutedprop 作为trueor传递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
     />