onClick 不适用于自定义创建的元素

Question

问候

我已经建立了一个搜索，每次用户键入单词时，它都会呈现新的复选框，但新的复选盒不像以前那样工作。事件侦听器都不处理新的复选复选框，当我点击复选框时，它们只是没有反应，但在旧的复选框中，在搜索呈现之前，它们正常工作

//search in checkbox data
const checkOptions = (container, value, containerId) => {
for (let i = 0; i < props.unique[containerId].length; i++) {
let item = props.unique[containerId][i];
if (
props.unique[containerId][i] !== null &&
props.unique[containerId][i].includes(value)
) {
element = (
<label
onClick={(e) => {e.stopPropagation(); ifAnyChecked(e);}} key={i}>
<input onClick={(e) => {tableSearch(e);}} type="checkbox" value={item ? item : "empty"}/>
{item && item.length > 28 ? (
handleCheckbox(item)
) : (
<p>{item}</p>
)}
</label>
);
tempData += ReactDOMServer.renderToString(element);
}
}
container.innerHTML = tempData;
};

知道发生了什么事吗？

Answer 1

您是否尝试使用onChange事件而不是onClick？据我所知，输入类型复选框并没有像onClick这样的事件。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

Answer 2

我在使用Vanilla JS时经常遇到这个问题，每当我渲染一个新元素时，该元素就不会触发我的事件。这是因为它们是在运行时生成的，所以事件没有绑定到该元素。现在我认为这件事也在这里发生。所以我更改了你的代码，并将其放入一个状态，现在它正在工作。我希望我能帮上忙。如果这不是你想要的解决方案，但它通过解决了你的问题，请告诉我

我把html放在一个状态数组中，然后把它映射到newCheckBoxdiv中。我用fieldValue状态把输入改为受控输入。最后，我将新的复选框警报从onClick={alert("doesn't goes in")}更改为onClick={() => alert("I think its working now right?")}

这是完整的代码沙盒https://codesandbox.io/s/polished-sea-vedvh?file=/src/App.js