使用 React.useState 钩子在 2 个状态（数字）之间交替

Question

我试图找出使用 React.useState 钩子的逻辑。 基本上，我想将“PlayOn”对象状态下的“音量”选项从 0 更改为 0.75。 我绝不是反应专家。

我只需要将函数的逻辑放入 soundChange 以在两种状态之间交替：0，这是未按下开关组件的默认初始状态； 0.75 这是开关组件被按下时的最终状态，当开关再次按下时再次回到 0。 我希望你们能帮助我。

        import React from 'react';
        import { makeStyles } from '@material-ui/core/styles';
        import Switch from '@material-ui/core/Switch';
        import Fade from '@material-ui/core/Fade';
        import FormControlLabel from '@material-ui/core/FormControlLabel';
        import Typography from '@material-ui/core/Typography';
        import Paper from '@material-ui/core/Paper';
        import useSound from 'use-sound';
        import Rick from './sounds/rick_astley.mp3';
    
    function Myswitch() {
        const classes = useStyles();
        const [checked, setChecked] = React.useState(false);
        const [withSound, setSound] = React.useState(0);
        const [playOn] = useSound(Rick, {
            volume: withSound,
            interrupt: true,
            soundEnabled: true,
        });
        const soundChange = () => {
            setSound(/*LOGIC HERE TO ALTERNATE BETWEEN 0 and 0.75 states*/);
        };
    const handleChange = () => {
        setChecked((prev) => !prev);
    };
return (
        <div className={classes.root}>
            <FormControlLabel
                control={
                    <Switch
                        checked={checked}
                        onChange={handleChange}
                        onMouseDown={soundChange}
                    />
                }
                label={
                    <Typography variant='h5' color='secondary'>
                        'DO NOT click!'
                    </Typography>
                }
            />
            <div className={classes.container}>
                <Fade in={checked}>
                    <Paper elevation={1} className={classes.paper}>
                        <img
                            src={
                                'https://media.tenor.com/images/f0e22aca6a9498ce63497ca56fb49602/tenor.gif'
                            }
                            alt='Never gonna give you up'
                        />
                        <Typography variant='h5' color='secondary'>
                            You had to click it XD
                        </Typography>
                    </Paper>
                </Fade>
            </div>
        </div>
    );
}

export default Myswitch;

Answer 1

据我了解您的问题，您想在状态之间切换。 您可以做的是拥有一个包含initial和final状态的状态变量，然后在如下所示的soundChange()函数中使用if...else进行切换。

在线 IDE 链接：现场演示在这里

代码片段

import React, { useState } from "react";

export default function App() {

   const [states] = useState({
     initial: 'initial',
     initialState: 0,
     final: 'final',
     finalState: 0.75
   })

  const [withSound, setSound] = useState(states.initialState);

  const [current, setCurrent] = useState(states.initial);

  const soundChange = () => {
   if (withSound === states.initialState) {
     setSound(states.finalState)
     setCurrent(states.final)
   } else {
     setSound(states.initialState)
     setCurrent(states.initial)
   }
  }

  return (
    <div>
      <button onClick={() => soundChange()}>Play {withSound} </button>
      <div> { current } </div>
    </div>
  )
}

这肯定会让您了解如何解决问题。

Answer 2

首先这样做：

const soundChange = () => {
        setSound(!withSound);
    };

然后

[playOn] =useSound(Rick, {
            volume: withSound ? 0.75 : 0,
            interrupt: true,
            soundEnabled: true,
        });

所以在你想要的事件调用中，调用 playOn()

Answer 3

首先将 withSound 默认设置为 null

 const [withSound, setSound] = React.useState(null);

然后将您的功能实现为

 const soundChange = () => {
            setSound(!withSound);
        };