React中动态创建元素的EventListener无法触发问题求助

问题场景 #

在React组件函数中，点击按钮通过document.createElement动态创建input和checkbox元素，并绑定change事件监听器，但事件始终无法触发（改成click也不行）。需求是添加表单输入元素，并在输入变化时将选项内容保存到数组中。

原代码片段：

const addChoice = (e) => {
  e.preventDefault();
  setCounter(counter => counter + 1);
  questionData.choices.push("");
  console.log(questionData.choices);

  const div = document.createElement('div');
  const input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('name', 'ans');
  input.setAttribute('id', `choice ${counter}`);
  input.setAttribute('class', 'form-control');
  input.addEventListener('change', handleChange);

  const check = document.createElement('input');
  check.type = "checkbox";
  check.id = `correctAnswer-${counter}`;
  check.name = "check";
  check.setAttribute('class','form-check-input');
  check.addEventListener('change', handleChange);

  div.id = `choice-div-${counter}`;
  div.className = "mb-3";
  div.innerHTML = `
  <label for="title" class="form-label">
    Ans ${counter}
  </label>
  `;
  div.appendChild(input);
  div.appendChild(check);
  div.innerHTML+=`
  <label class="form-check-label" for="correctAnswer-${counter}">
  Correct
  </label>`;
  const targetNode = document.getElementById('choices');
  targetNode.appendChild(div);
};

问题根源 #

核心问题出在div.innerHTML += ...这一步：

• 第一次给div.innerHTML赋值时，会创建初始的label元素；
• 调用div.appendChild(input)和div.appendChild(check)后，两个元素被添加到div中；
• 但执行div.innerHTML += ...时，浏览器会将当前div的HTML内容重新拼接成字符串，再重新解析生成新DOM元素——这会销毁之前append进去的input和checkbox，它们绑定的事件监听器也跟着消失了。

另外，在React中直接操作原生DOM违背了状态驱动渲染的理念，容易引发更多难以追踪的问题。

解决方案 #

方案1：修复原生DOM操作逻辑 #

避免使用innerHTML +=，改用document.createElement创建所有元素并通过appendChild添加，确保原有元素不会被销毁：

const addChoice = (e) => {
  e.preventDefault();
  // 用状态更新函数获取最新counter值，避免滞后问题
  setCounter(prevCounter => {
    const newCounter = prevCounter + 1;
    // 若questionData是React状态，必须用状态更新函数生成新数组
    setQuestionData(prev => ({
      ...prev,
      choices: [...prev.choices, ""]
    }));

    const div = document.createElement('div');
    div.id = `choice-div-${newCounter}`;
    div.className = "mb-3";

    // 创建第一个label
    const ansLabel = document.createElement('label');
    ansLabel.className = "form-label";
    ansLabel.setAttribute('for', `choice-${newCounter}`);
    ansLabel.textContent = `Ans ${newCounter}`;
    div.appendChild(ansLabel);

    // 创建文本输入框
    const input = document.createElement('input');
    input.type = 'text';
    input.name = 'ans';
    input.id = `choice-${newCounter}`;
    input.className = 'form-control';
    input.addEventListener('change', handleChange);
    div.appendChild(input);

    // 创建checkbox
    const check = document.createElement('input');
    check.type = "checkbox";
    check.id = `correctAnswer-${newCounter}`;
    check.name = "check";
    check.className = 'form-check-input';
    check.addEventListener('change', handleChange);
    div.appendChild(check);

    // 创建checkbox的label
    const checkLabel = document.createElement('label');
    checkLabel.className = "form-check-label";
    checkLabel.setAttribute('for', `correctAnswer-${newCounter}`);
    checkLabel.textContent = "Correct";
    div.appendChild(checkLabel);

    const targetNode = document.getElementById('choices');
    targetNode.appendChild(div);

    return newCounter;
  });
};

方案2：改用React状态驱动渲染（推荐） #

完全抛弃原生DOM操作，用React状态管理选项列表，让React负责渲染和事件绑定，这才是React的标准用法：

import { useState } from 'react';

const YourComponent = () => {
  // 用状态管理选项，每个选项包含文本和是否正确的标记
  const [choices, setChoices] = useState([{ text: "", isCorrect: false }]);

  // 处理文本输入变化
  const handleTextChange = (index, e) => {
    const newChoices = [...choices];
    newChoices[index].text = e.target.value;
    setChoices(newChoices);
  };

  // 处理checkbox状态变化
  const handleCheckChange = (index) => {
    const newChoices = [...choices];
    newChoices[index].isCorrect = !newChoices[index].isCorrect;
    setChoices(newChoices);
  };

  // 添加新选项
  const addChoice = (e) => {
    e.preventDefault();
    setChoices([...choices, { text: "", isCorrect: false }]);
  };

  return (
    <div>
      {/* 添加选项按钮 */}
      <button onClick={addChoice} className="btn btn-primary mb-3">添加选项</button>
      
      {/* 渲染所有选项 */}
      <div id="choices">
        {choices.map((choice, index) => (
          <div key={index} className="mb-3">
            <label htmlFor={`choice-${index}`} className="form-label">
              Ans {index + 1}
            </label>
            <input
              type="text"
              name="ans"
              id={`choice-${index}`}
              className="form-control"
              value={choice.text}
              onChange={(e) => handleTextChange(index, e)}
            />
            <input
              type="checkbox"
              id={`correctAnswer-${index}`}
              name="check"
              className="form-check-input"
              checked={choice.isCorrect}
              onChange={() => handleCheckChange(index)}
            />
            <label className="form-check-label" htmlFor={`correctAnswer-${index}`}>
              Correct
            </label>
          </div>
        ))}
      </div>
    </div>
  );
};

export default YourComponent;

这种方式的优势：

• 无需手动操作DOM，事件绑定自然生效；
• 状态与视图完全同步，避免DOM和状态不一致的问题；
• 代码更简洁，易于维护和调试。

内容的提问来源于stack exchange，提问作者Firas Abuzahra