Javascript 多个按钮具有相同的类且没有唯一的id，如何识别仅使用vanilla JS单击哪个按钮

我制作了一个简单按钮的反应组件，带有onclick涟漪效应。现在的问题是，如果我有超过1个按钮，无论我点击哪个按钮，动画都会出现在第一个按钮上。如何确定单击了哪个按钮并在该按钮上运行动画 我只使用vanilla JS，因为我是编程新手

import React, { Component } from 'react';
import "./CommonButtons.css"
import "./DefaultButton.css"

class  DefaultButton extends Component {
state = {  }
AddRipple = (Class)=>
{

    let pro = document.getElementsByClassName("Button")
    pro[0].innerHTML = "<span class='Button-ripple'></span>" + 
    pro[0].innerHTML;

    let height = 
 (window.getComputedStyle(document.getElementsByClassName("Button") 
[0]).width)
    document.getElementsByClassName("Button-ripple") 
[0].style.height=`${height}`;

    pro[0].addEventListener("animationend", function(){
        pro[0].innerHTML="<span class='ButtonText' style='color: 
 white;'>DEFAULT</span>"
    });

    console.log(Class)

  }

 render() { 

    let {color, BG, Text} = this.props;

    return ( 

        <button className="Default Button" onClick= 
 {()=>this.AddRipple(this)}>
            <span className="ButtonText" style={{color:`${color}`}}> 
 {`${Text}`.toUpperCase()}</span>
        </button>


     );
}
}

export default DefaultButton;

import React，{Component}来自'React'；
导入“/CommonButtons.css”
导入“/DefaultButton.css”
类DefaultButton扩展组件{
状态={}
AddRipple=（类）=>
{
让pro=document.getElementsByCassName（“按钮”）
pro[0]。innerHTML=”“+
pro[0].innerHTML；
让高度=
（window.getComputedStyle（document.getElementsByClassName（“按钮”）
[0]）。宽度）
document.getElementsByClassName（“按钮波纹”）
[0]。style.height=`${height}`；
pro[0]。addEventListener（“animationend”，函数（）{
pro[0]。innerHTML=“默认”
});
console.log（类）
}
render（）{
让{color，BG，Text}=this.props；
报税表（
this.AddRipple（this）}>
{${Text}`.toUpperCase（）}
);
}
}
导出默认值按钮；

---

如何在DefaultButton类中识别并添加对正确按钮的影响创建一个字段

buttonRef

    class  DefaultButton extends Component {
        state = {  }
        buttonRef = React.createRef()
        ...
    }

将字段传递给button的ref prop，如下所示：

 <button ref={this.buttonRef} className="Default Button" ... />

更改方法的实现。在

类

之外，取一个参数

按钮元素

，它将是您的按钮。不要在文档中查询按钮，因为您不再需要它了

AddRipple = (buttonElement) => {
   ...
}

Refs机制正是您在此需要的，如下所述：

---

为什么要使用非唯一键？我希望这个组件可以重用，而不必每次都拿出代码并添加唯一id。你的标题是vanilla JS，但这显然是ReactJS。你到底想要什么答案？我还在寻找答案！

AddRipple = (buttonElement) => {
   ...
}