javascript - 反应将带有 onClick 事件的 html 标记添加到 innerHTML

Question

我有一个功能，它将标签添加到 allTags innerHTML

出于某种原因，当我添加 onClick 事件时，标签显示为removeTag(e)} class='tag'>python而不是仅仅添加它应该添加的数据，我该如何解决这个问题？

index.js

let tags = [];
const parseTags = e => {
  const allTags = document.getElementById("all-tags");
  let text = e.target.value;

  if (text.length > 1 && text[text.length - 1] == ",") {
    tags.push(text.substring(0, text.length - 1));

    allTags.innerHTML += `<p id='tag-${
      tags.length
    }' onClick={(e) => removeTag(e)} class='tag'>${text.substring(
      0,
      text.length - 1
    )}</p>`;

    e.target.value = "";
  }
};

const removeTag = e => {
  tags.pop(e.target.value);
  e.target.remove();
};

标签： javascriptreactjs