如何在动态创建的按钮上添加onClick事件

Question

每当我收到一条消息时，我都试图附加一个元素块。 基本上是简单的聊天。

因此，每次收到新的聊天记录时，新消息都会被添加到div。

但是我无法向其添加onClick事件
这是一行：<button class="likeBtn" onClick={this.pointButton}><i class="far fa-heart"></i></button>

let msgLeft = document.getElementById("msg-left");
if (this.state.username === data.username) {
msgLeft.insertAdjacentHTML(
"beforeend",
`<div class="main-c-container-right">
<div class="c-image"></div>
<div class="c-text-container">
<div class="c-name">
${data.username}
</div>
<div class="c-text"> 
<div class="c-pointer"></div>
${data.message.replace(/\n/g, "<br>")}
</div> 
<div class="c-time">
${currentTime} 
</div> 
<button class="likeBtn" onClick={this.pointButton}><i class="far fa-heart"></i></button>
</div>
</div>`
);

Answer 1

基本上，您需要做的是将元素数组保存在某个位置（本地状态，redux等），然后在JSX上显示元素数组。

如果需要向该数组添加新元素，只需使用新元素更新此值，React就会知道如何重新呈现所有内容。

使用React时，您无需直接操作DOM。