按钮甚至没有点击的原因是什么？

Question

按钮不能与下拉选项一起工作。我需要做什么改变吗?

import React, { Component, Fragment } from 'react'
export class MegaMenu extends Component {
constructor(){
super();
this.MegaMenu = this.MegaMenu.bind();
}
componentDidMount(){
this.MegaMenu();
}

MegaMenu(){
var acc = document.getElementsByClassName("accordion");
var accNum = acc.length;
var i;
for(i=0;i<accNum;i++){
acc[i].addEventListener("click",function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if(panel.style.maxHeight){
panel.style.maxHeight = null;
}else{
panel.style.maxHeight = panel.scrollHeight+ "px"
}
})
}
}
render() {
return (
<div className='accordionMenuDiv'>
<div className='accordionMenuDivInside'>
<button className='accordion'>
<img className='accordionMenuIcon' src="https://cdn-icons-png.flaticon.com/128/739/739249.png" />&nbsp; Mens Clothing
</button>
<div className='panel'>
<ul>
<li><a href="a" className='accordionItem'>Mans T-shirt1</a></li>
<li><a href="a" className='accordionItem'>Mans T-shirt2</a></li>
</ul>
</div>

Answer 1

你可以在react元素上使用onClick处理程序这应该可以，

this.handler = (e) => {
e.target.classList.toggle('active');
var panel = e.target.nextElementSibling;
if (panel.style.maxHeight) {
e.target.nextElementSibling.style.maxHeight = null;
} else {
e.target.nextElementSibling.style.maxHeight = e.target.nextElementSibling.scrollHeight + 'px';
}};
<button className='accordion' onClick= {this.handler}>

附加onclick在任何地方你需要所有的classname按钮，如果太多的按钮，然后使用事件冒泡在所有的按钮的父元素