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

Question

每次收到消息时，我都尝试附加一个元素 block 。这基本上是一个简单的聊天。

因此，每次收到新聊天时，新消息都会附加到 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。