React JS中基于双下拉框映射双API输出至单表的实现求助

核心实现思路 #

• 用同一个事件处理函数监听两个下拉框的change事件，通过事件源ID区分当前操作的是用户选择还是项目选择
• 处理下拉框互斥逻辑：选中其中一个时清空另一个的选择，避免同时选择导致的结果冲突
• 根据选择类型筛选对应关联数据，动态更新表格的表头和内容

原生JavaScript示例代码 #

HTML结构 #

<!-- 用户选择下拉框 -->
<select id="userSelect">
  <option value="">选择用户</option>
</select>

<!-- 项目选择下拉框 -->
<select id="projectSelect">
  <option value="">选择项目</option>
</select>

<!-- 关联关系展示表格 -->
<table id="relationTable" border="1">
  <thead>
    <tr>
      <th id="colHeader1">用户名</th>
      <th id="colHeader2">关联项目</th>
    </tr>
  </thead>
  <tbody id="tableContent"></tbody>
</table>

JavaScript逻辑 #

// 模拟业务数据源：用户与项目的关联映射
const relationData = [
  { userId: 'u001', userName: '张三', projectId: 'p001', projectName: '客户管理系统' },
  { userId: 'u001', userName: '张三', projectId: 'p002', projectName: '数据分析平台' },
  { userId: 'u002', userName: '李四', projectId: 'p001', projectName: '客户管理系统' },
  { userId: 'u002', userName: '李四', projectId: 'p003', projectName: 'OA办公系统' },
  { userId: 'u003', userName: '王五', projectId: 'p002', projectName: '数据分析平台' },
];

// 获取DOM元素
const userSelect = document.getElementById('userSelect');
const projectSelect = document.getElementById('projectSelect');
const tableContent = document.getElementById('tableContent');
const colHeader1 = document.getElementById('colHeader1');
const colHeader2 = document.getElementById('colHeader2');

// 统一处理下拉框变更的函数
function handleSelectionChange(e) {
  // 清空另一个下拉框的选中值，避免冲突
  if (e.target.id === 'userSelect') {
    projectSelect.value = '';
  } else {
    userSelect.value = '';
  }

  const selectedVal = e.target.value;
  let filteredResult = [];
  let headerText1 = '';
  let headerText2 = '';

  // 根据选择类型筛选数据
  if (e.target.id === 'userSelect' && selectedVal) {
    filteredResult = relationData.filter(item => item.userId === selectedVal);
    headerText1 = '用户名';
    headerText2 = '关联项目';
  } else if (e.target.id === 'projectSelect' && selectedVal) {
    filteredResult = relationData.filter(item => item.projectId === selectedVal);
    headerText1 = '项目名';
    headerText2 = '关联用户';
  }

  // 更新表格表头
  colHeader1.textContent = headerText1 || '用户名';
  colHeader2.textContent = headerText2 || '关联项目';

  // 渲染表格内容
  tableContent.innerHTML = '';
  filteredResult.forEach(item => {
    const row = document.createElement('tr');
    const cell1 = document.createElement('td');
    const cell2 = document.createElement('td');

    cell1.textContent = e.target.id === 'userSelect' ? item.userName : item.projectName;
    cell2.textContent = e.target.id === 'userSelect' ? item.projectName : item.userName;

    row.appendChild(cell1);
    row.appendChild(cell2);
    tableContent.appendChild(row);
  });
}

// 初始化下拉框选项
function initSelectOptions() {
  // 生成不重复的用户选项
  const uniqueUsers = [...new Set(relationData.map(item => JSON.stringify({ userId: item.userId, userName: item.userName })))]
    .map(str => JSON.parse(str));
  uniqueUsers.forEach(user => {
    const option = document.createElement('option');
    option.value = user.userId;
    option.textContent = user.userName;
    userSelect.appendChild(option);
  });

  // 生成不重复的项目选项
  const uniqueProjects = [...new Set(relationData.map(item => JSON.stringify({ projectId: item.projectId, projectName: item.projectName })))]
    .map(str => JSON.parse(str));
  uniqueProjects.forEach(project => {
    const option = document.createElement('option');
    option.value = project.projectId;
    option.textContent = project.projectName;
    projectSelect.appendChild(option);
  });
}

// 绑定事件并初始化
userSelect.addEventListener('change', handleSelectionChange);
projectSelect.addEventListener('change', handleSelectionChange);
initSelectOptions();

关键细节说明 #

• 事件区分：通过e.target.id判断当前操作的下拉框，从而执行对应的筛选逻辑
• 互斥处理：选中一个下拉框时清空另一个的选择，确保每次只有一个查询条件生效
• 动态表头：根据查询类型切换表头文本，让表格展示的信息更直观
• 去重选项：用Set处理数据源，生成不重复的下拉框选项，避免冗余内容

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