Question

我遇到的问题是我的应用程序应该在按下按钮时播放音频剪辑。但是，我使用按钮从上一个屏幕导航到这个屏幕。到达后，所有音频文件都会播放。有没有办法阻止这种情况？不管我把 pTest 和 pTest2 放在哪里，它们总是在导航时播放。有没有我的代码如下：

import React from 'react'
import { Button, Typography, Grid } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
import Avatar from '@material-ui/core/Avatar';
import TextField from '@material-ui/core/TextField';
import { MemoryRouter as Router } from 'react-router';
import { Link as RouterLink } from 'react-router-dom';




const useStyles = makeStyles({
  helloThereStyle:{
    fontStyle: 'oblique',
    color: "blue",
    fontSize: '30px'
  },
  buttonStyles: {
    color: 'blue',

  }
});
  const click = () =>{
    console.log("click")
  }

  let aTest = new Audio("/Assets/Sound/test.wav")

  const pTest = () => {
    aTest.play()
  }
  let aTest2 = new Audio("/Assets/Sound/test2.wav")

  const pTest2 = () => {
    aTest2.play()
  }

function Two() {
  
  const classes = useStyles();


  return (
    <div className="Two">
      <h1>Page Two</h1>
      <Grid container>
        <Grid xs={1}>
          <Button 
          className={classes.buttonStyles} 
          variant="outlined" 
          color="primary"
          startIcon={<Avatar src={'/Assets/back.png'}/>}
          component={RouterLink} 
          to="/"
          >
          </Button>
        </Grid>
        <Grid xs={1}>
          <Button 
          className={classes.buttonStyles} 
          variant="outlined" 
          color="primary"
          startIcon={<Avatar src={'https://i.redd.it/w3kr4m2fi3111.png'} />}
          component={RouterLink} 
          to="/Two"
          onClick={pTest()}
          >Test
          </Button>
        </Grid>
        <Grid xs={1}>
          <Button 
          className={classes.buttonStyles} 
          variant="outlined" 
          color="primary"
          startIcon={<Avatar src={'https://i.redd.it/w3kr4m2fi3111.png'} />}
          component={RouterLink} 
          to="/Two"
          onClick={pTest2()}
          >Test2
          </Button>
        </Grid>
        </Grid>
    </div>

  );
}

export default Two;

Answer 1

onclick 中的函数无需任何点击事件即可运行，因此您需要对其进行更改

onClick = {() => pTest2()}

和

onClick={ () => pTest()}

在导航和按钮按下时播放音频

1 个答案: