Blazor OnChange事件如何获取当前问题的Comment字段并验证

核心问题是循环生成的表格行中，下拉框的change事件无法直接关联到当前行的评论输入框。以下是几种实用的解决思路：

1. 利用DOM层级关系获取当前行的评论框 #

通过下拉框元素向上查找所属的表格行，再在该行内定位评论输入框。这种方法无需额外标识，依赖DOM结构的关联性。

示例代码（原生JS） #

<!-- 循环生成的表格行结构 -->
<table id="question-table">
  <tr data-question-id="1">
    <td>问题1：系统响应速度是否达标？</td>
    <td>
      <select class="answer-select">
        <option value="1">Met</option>
        <option value="0">Not Met</option>
      </select>
    </td>
    <td><input type="text" class="comment-input" placeholder="可选评论"></td>
    <td><button class="save-btn">保存</button></td>
  </tr>
  <!-- 更多问题行... -->
</table>

// 绑定change事件（支持静态生成的行）
document.querySelectorAll('.answer-select').forEach(select => {
  select.addEventListener('change', handleAnswerChange);
});

// 事件处理函数
function handleAnswerChange() {
  const answerValue = parseInt(this.value);
  // 获取当前下拉框所在的表格行
  const currentRow = this.closest('tr');
  // 在当前行内找到评论输入框
  const commentInput = currentRow.querySelector('.comment-input');
  const commentContent = commentInput.value.trim();

  // 验证逻辑：选择Not Met时必须填写评论
  if (answerValue === 0 && !commentContent) {
    alert('选择"Not Met"时必须填写评论');
    commentInput.focus();
    return;
  }

  // 执行保存操作，可传入问题ID、答案、评论
  saveQuestionAnswer(
    currentRow.dataset.questionId,
    answerValue,
    commentContent
  );
}

// 模拟保存函数
function saveQuestionAnswer(questionId, answerValue, comment) {
  // 这里替换为实际的AJAX请求或本地存储逻辑
  console.log(`保存问题[${questionId}]：答案=${answerValue}，评论=${comment}`);
}

2. 事件委托（适配动态生成的行） #

如果表格行是通过AJAX或其他方式动态添加的，直接绑定事件会失效，这时用事件委托将监听绑定到父级表格：

// 事件委托：监听表格内的下拉框change事件
document.getElementById('question-table').addEventListener('change', function(e) {
  if (e.target.classList.contains('answer-select')) {
    // 调用同一个处理函数
    handleAnswerChange.call(e.target);
  }
});

3. 自定义数据属性关联元素 #

给下拉框和评论输入框添加相同的data-question-id属性，通过ID直接匹配对应元素：

// 事件处理函数示例
function handleAnswerChange() {
  const questionId = this.dataset.questionId;
  const answerValue = parseInt(this.value);
  // 通过questionId找到对应评论框
  const commentInput = document.querySelector(`.comment-input[data-question-id="${questionId}"]`);
  const commentContent = commentInput.value.trim();

  // 验证与保存逻辑同前...
}

关键说明 #

• 用closest('tr')可以快速定位当前元素所在的表格行，避免遍历整个DOM；
• 事件委托能有效处理动态生成的DOM元素，无需重复绑定事件；
• 自定义数据属性(data-*)适合需要跨DOM层级关联元素的场景。

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