如何在動態創建的按鈕上添加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。