每次收到消息时,我都尝试附加一个元素 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>`
);
最佳答案
基本上,您需要做的是将元素数组保存在某处(本地状态、redux 等)并在 JSX 上显示元素数组。
如果您需要向此数组添加新元素,您只需使用新元素更新此值,React 就会知道如何再次重新渲染所有内容。
使用 React 时不需要直接操作 DOM。
关于javascript - 如何在动态创建的按钮上添加 onClick 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57253600/