如何在reactjs中选择单击的元素？

我是reactjs新手，在这里我定义了组件，我将标题传递给声卡，通过使用标题，我还定义了音频文件的源。在点击那个特定的组件后，我想播放那个特定的音频文件。 在js中，我们可以使用$（this.find（）实现这一点

但是在这个问题上，有人能帮我吗

import React from 'react';
import AudioCard from './AudioCard';
import '../css/RecommendedAudios.css';

function RecommandedAudios() {
    return (
        <div className="recommandedaudios">
            <h2>Recommanded</h2>
            <div className="recommandedaudios_audios">
                <AudioCard title="Arrows to Athens - Alive" />
                <AudioCard title="Arrows to Athens - Dust & Gold" />
                <AudioCard title="Arrows to Athens - Stars" />
                <AudioCard title="Arrows to Athens - Used to be" />
                <AudioCard title="Bryan Adams - Here I am" />
                <AudioCard title="My Heart Belongs to You" />
                <AudioCard title="Ravenscode - My Escape" />
            </div>
        </div>
    );
}

export default RecommandedAudios;

从“React”导入React；
从“./声卡”导入声卡；
导入“../css/RecommendedAudios.css”；
函数RecommandeAudios（）{
返回(
推荐
);
}
导出默认推荐音频；

从“React”导入React；
导入“../css/AudioCard.css”；
从“@material ui/icons/PlayArrow”导入PlayArrow图标；
功能声卡（{标题，时间戳}）{
var playsong=（）=>{
const select=document.querySelector（“音频”）；
选择。播放（）；
};
返回(
{title}
);
}
导出默认声卡；

文档。querySelector（“audio”）将返回HTML中的第一个“audio”标记，而不是您要查找的特定标记

您可以使用ref：

import React, { useRef } from 'react'

function AudioCard({ title, timestamp }) {

const audioEl = useRef(null);

const playsong = () => audioEl.current.play();

    return (
        <div onClick={playsong} className="audiocard">
            <PlayArrowIcon />
            <div className="audiocard_info">
                <div className="audiocard_title">
                    <h5>{title}</h5>
                    <audio ref={audioEl} src={require(`../sounds/${title}.mp3`)}></audio>
                </div>
            </div>
        </div>
    );
}

import React，{useRef}来自“React”
功能声卡（{标题，时间戳}）{
const audioEl=useRef（空）；
const playsong=（）=>audioEl.current.play（）；
返回(
{title}
);
}

您可以使用

react音频播放器

，而不是使用

查询选择器

和HTML音频标签 您可以通过以下方式安装它：

npm install --save react-audio-player

并将库导入到您的代码中并使用

import ReactAudioPlayer from 'react-audio-player';
const [audio,ReferAudio] = useState()
 ...........

<div onClick={playsong} className="audiocard">
            <PlayArrowIcon />
            <div className="audiocard_info">
                <div className="audiocard_title">
                    <h5>{title}</h5>
                  <ReactAudioPlayer
  src={require(`../sounds/${title}.mp3`)}
  controls
ref={(e) => { ReferAudio(e) }}
/>
                </div>
            </div>
        </div>

从“react audio player”导入react audio player；
const[audio，refereaudio]=useState（）
...........
{title}
{refereaudio（e）}
/>

您可以使用

音频

---

你可以编辑更多文档。querySelector（“audio”）将返回HTML中的第一个“audio”标记，而不是你要查找的特定标记，我建议从外部添加id是的，我知道在js中我会使用$（此）。querySelector（“audio”）；但它在react js中不起作用。在react js中是否有相同的替代方法？是的，您可以使用ref，playsong函数调用，如

onClick={（）=>playsong（）}

@NitishKurhadkar使用ref添加了答案，使用react音频播放器检查它是可选的。使用可以使用useRef（）要访问htmlelement@NitishKurhadkar如果成功了，就把它当作解决了，这样其他有类似问题的人也能解决他们的问题

import ReactAudioPlayer from 'react-audio-player';
const [audio,ReferAudio] = useState()
 ...........

<div onClick={playsong} className="audiocard">
            <PlayArrowIcon />
            <div className="audiocard_info">
                <div className="audiocard_title">
                    <h5>{title}</h5>
                  <ReactAudioPlayer
  src={require(`../sounds/${title}.mp3`)}
  controls
ref={(e) => { ReferAudio(e) }}
/>
                </div>
            </div>
        </div>