Блог

Я пытаюсь разобраться в логике, используя перехваты React.useState. По сути, я хочу изменить параметр «объем» в состоянии объекта «PlayOn» с 0 до 0,75. Я ни в коем случае не эксперт по реакции.

Мне просто нужна логика функции для ввода soundChange для чередования двух состояний: 0, которое является начальным состоянием по умолчанию, в котором компонент switch не был нажат; 0,75, которое является его конечным состоянием, в котором был нажат компонент switch, и снова возвращается к 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;
  

Насколько я понимаю ваш вопрос, вы хотите переключаться между состояниями. Что вы можете сделать, так это иметь переменную состояния, содержащую initial final состояния и, а затем переключать использование if...else в soundChange() функции, показанной ниже.

Ссылка на онлайн-среду разработки: живая демонстрация здесь

Фрагмент кода

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

Это, несомненно, даст вам представление о том, как подойти к проблеме.

Сначала сделайте это:

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

Затем

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

Итак, в ваших желаемых вызовах событий вызывайте PlayOn()

Сначала установите значение withSound равным null по умолчанию

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

Затем реализуйте свою функцию как

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