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 放在一个状态数组中，然后将它映射到newCheckBox div 中。 我将输入更改为具有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