单击“不工作”时的“反应/Javascript”按钮

在过去的几周里，我一直在开发一个discord克隆，现在我正在尝试实现不同的服务器。我有一个函数，它接收用户的服务器并为每个服务器创建一个按钮，但button onClick事件不起作用。我尝试使用

document.createElement（“按钮”）

然后附加一个事件侦听器，但没有成功。然后我切换到使用react元素，但它仍然不起作用。我错过什么了吗？下面是处理服务器按钮的代码

类主函数{
建造商（uInfo）{
this.uInfo=uInfo；
}
设置服务器（服务器）{
var servBar=document.getElementById（“服务器图标”）；
var out=[]；
对于（var i=0；i`；
}
}
类ServerButton扩展了React.Component{
建造师（道具）{
超级（道具）；
this.id=props.id；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
log（“这是：”，这是）；
}
render（）{
返回(
C
);
}
}
（新的主功能）。设置服务器（[1,2]）

尝试添加此

onClick={（）=>this.handleClick（）}

此行

servBar.innerHTML+=`
`正在破坏它。“如果你把它取下来，它会工作的。”布里安顿普森非常感谢你，我在过去的一天里一直盯着它试图修复它。解决方案是将其添加到服务器端还是有更好的方法？我不确定您的用例是否是我从未见过的，或者您是否将其过度复杂化，但是整个
mainformations
类似乎不必要，可能会导致更多的混乱。使用React时，您应该永远不需要手动操作DOM（
innerHTML
，
createElement
，等等）。相反，制作一个包装器组件并对所有内容使用JSX（包括
hr
标记）。您不应该在React中手动操作dom，因为React生成dom并处理所有dom。改用jsx和逻辑。同时停止使用类组件，即使React本身也不希望有人使用它们，而是使用功能组件和挂钩。