React TextArea元素onChange事件无法正常绑定问题咨询

尝试在页面渲染完成后为目标元素绑定onChange事件监听器，当前代码运行异常：超时回调执行后事件仅触发一次，并未真正绑定到对应元素上。
代码执行时可正常定位到目标TextArea元素，控制台也能正确打印该元素对象，元素状态截图如下：

原有问题代码：

const myTimeout = setTimeout(addOnChange, 5000);

function addOnChange(){
  let comment_box = document.getElementsByClassName("text-area standard-focus wfFormControl form-control")[0];
  console.log(comment_box);
  comment_box.addEventListener("change", alert('works!!!'));
}

addEventListener 的第二个参数要求传入函数引用，只有对应事件触发时才会执行传入的函数。
你当前写法中alert('works!!!')是立即执行语句：代码运行到绑定事件这一行时，alert会立刻弹出一次，随后将alert的返回值（undefined）作为事件回调传入，相当于没有给元素绑定有效的监听函数，后续修改文本框内容自然不会触发预期逻辑。

把需要执行的逻辑包裹在函数内，将函数引用传入addEventListener即可：

const myTimeout = setTimeout(addOnChange, 5000);

function addOnChange(){
  let comment_box = document.getElementsByClassName("text-area standard-focus wfFormControl form-control")[0];
  console.log(comment_box);
  // 传入函数引用，change事件触发时才会执行内部alert
  comment_box.addEventListener("change", function() {
    alert('works!!!');
  });
  // 箭头函数简写形式：comment_box.addEventListener("change", () => alert('works!!!'));
}

优化提示：靠固定5秒延时等待元素渲染稳定性很差，如果页面加载速度慢于5秒会出现获取不到元素的问题。更稳妥的方案是用短间隔轮询检测目标元素是否存在，确认元素加载完成后再绑定事件，参考实现：

const checkTimer = setInterval(() => {
  const comment_box = document.getElementsByClassName("text-area standard-focus wfFormControl form-control")[0];
  if (comment_box) {
    clearInterval(checkTimer);
    comment_box.addEventListener("change", () => alert('works!!!'));
  }
}, 100);

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