再會。我有一個音樂串列，在可用的功能中，我只想讓用戶播放和暫停音樂，但我遇到了問題。onClick我必須根據我之前得到的錯誤寫一個函式，我不能item.url.play()直接寫，但是如果我用函式寫，它就不會識別該專案。現在有什么解決辦法？你說。
為了更好地理解代碼
const Musics = [
{
name: "это ли счастье",
img: этолисчастьеImg,
singer: "Rauf & Faik",
url: этолисчастьеMusic
},
//code...
];
return (
<>
<Box className="list-box">
{Musics.map((item) =>
<Grid container className="box-music">
<Grid item lg={3}>
<img src={item.img} width="80px" height="80px" className="img-box" />
</Grid>
<Grid item lg={7} className="text">
<Typography>
<h5 className="name"> {item.name} </h5>
</Typography>
<p style={{ color: "#6f009b" }}>{item.singer}</p>
</Grid>
<Grid item lg={1}>
<i className="fa fa-play fa-1x pley" aria-hidden="true" onClick={x}></i>
</Grid>
</Grid>
)}
</Box>
</>
);uj5u.com熱心網友回復：
而不是 x 嘗試
() => yourfunc(item)
您無需直接呼叫即可訪問 item
uj5u.com熱心網友回復：
首先，您需要使用一個audio 元素，然后在您的 上onClick，您應該根據歌曲的 URL 更改音頻源。
首先把它放在你的 DOM 上：
<audio id="audio" controls="controls">
<source id="audioSource" src=""></source>
Your browser does not support the audio format.
</audio>
然后在你的 html 中：
<Grid item lg={1}>
<i className="fa fa-play fa-1x pley" aria-hidden="true" onClick={(e) => {e.preventDefault(); this.play(item.url);}}></i>
</Grid>
并像這樣宣告你的播放方法：
play(songUrl) {
const audio = document.getElementById('audio');
var source = document.getElementById('audioSource');
source.src = songUrl;
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/348439.html
標籤：javascript 反应 功能 点击