React动态生成的自定义checkbox元素onClick点击事件不生效问题

• 你使用的ReactDOMServer.renderToString方法仅用于服务端渲染场景，只会输出纯静态HTML字符串，所有你在JSX中绑定的React合成事件会被完全剥离，不会包含在生成的HTML中。
• 你直接通过container.innerHTML = tempData手动修改真实DOM，这部分新增的DOM元素完全脱离了React的虚拟DOM管控，React的事件委托机制无法识别到这些元素的存在，因此绑定的点击事件无法触发。而搜索前就存在的checkbox是由React正常渲染生成的，在React的管控范围内，所以事件可以正常响应。

推荐方案（符合React开发规范） #

放弃手动操作DOM、拼接HTML字符串的写法，完全通过React的状态管理和渲染机制实现过滤逻辑：

1. 在组件中声明state存储过滤后的选项列表：

const [filteredCheckOptions, setFilteredCheckOptions] = useState([])

2. 搜索触发时，直接过滤对应容器的选项数组，更新state：

const checkOptions = (value, containerId) => {
  const filtered = props.unique[containerId].filter(item => {
    return item !== null && item.includes(value)
  })
  setFilteredCheckOptions(filtered)
}

3. 在组件的render逻辑中直接遍历state渲染checkbox元素：

{
  filteredCheckOptions.map((item, i) => (
    <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>
  ))
}

这种写法下所有元素都在React的管控范围内，事件绑定可以正常生效，也能避免真实DOM和React虚拟DOM不同步的问题。

兼容方案（不推荐，仅用于无法修改原有架构的场景） #

使用原生事件委托机制，在container父容器上提前绑定点击事件，通过事件冒泡判断触发元素的类型，再执行对应逻辑：

// 页面初始化时仅执行一次，给容器绑定事件
container.addEventListener('click', (e) => {
  const target = e.target
  // 点击的是checkbox
  if (target.tagName === 'INPUT' && target.type === 'checkbox') {
    tableSearch(e)
  }
  // 点击的是label
  if (target.tagName === 'LABEL') {
    e.stopPropagation()
    ifAnyChecked(e)
  }
})

这种方案不需要修改现有渲染逻辑，但维护成本更高，容易出现事件冲突。

内容的提问来源于stack exchange，提问作者Shota Donguzashvili