如何为JHipster项目中的React表格添加exchange筛选下拉搜索功能

1. 新增筛选相关状态与选项计算 #

在你的组件内部添加以下代码，用于存储筛选值和生成去重的Exchange下拉选项：

import { useState, useMemo } from 'react';
import { Form } from 'react-bootstrap'; // 若项目已导入可忽略此行

// 组件内部代码
// 存储选中的Exchange筛选值，默认空值代表展示全部数据
const [selectedExchange, setSelectedExchange] = useState('');

// 从全量activePairsList中提取所有不重复的exchangeId作为下拉选项
const exchangeOptions = useMemo(() => {
  if (!activePairsList) return [];
  const allExchangeIds = activePairsList.map(item => item.exchangeId).filter(Boolean);
  return [...new Set(allExchangeIds)];
}, [activePairsList]);

// 筛选后的数据列表
const filteredActivePairs = useMemo(() => {
  if (!activePairsList) return [];
  // 未选中筛选值时返回全量数据
  if (!selectedExchange) return activePairsList;
  // 按选中的exchangeId过滤
  return activePairsList.filter(item => item.exchangeId === selectedExchange);
}, [activePairsList, selectedExchange]);

2. 新增下拉筛选UI #

在表格外层的table-responsive div上方添加筛选控件，同时修改原有表格的渲染逻辑：

{/* Exchange筛选栏 */}
<div className="mb-3 d-flex align-items-center gap-2">
  <label htmlFor="exchange-filter" className="form-label mb-0">按Exchange筛选：</label>
  <Form.Select
    id="exchange-filter"
    value={selectedExchange}
    onChange={(e) => setSelectedExchange(e.target.value)}
    style={{ maxWidth: '220px' }}
  >
    <option value="">全部Exchange</option>
    {exchangeOptions.map(exchangeId => (
      <option key={exchangeId} value={exchangeId}>
        {exchangeId}
      </option>
    ))}
  </Form.Select>
</div>

{/* 原有table-responsive div代码，仅修改数据源相关逻辑即可 */}
<div className="table-responsive">
  {filteredActivePairs && filteredActivePairs.length > 0 ? (
    <Table responsive>
      {/* 原有thead代码完全保留 */}
      <thead>
        ...........
      </thead>
      <tbody>
        {/* 把原有的activePairsList.map替换为filteredActivePairs.map */}
        {filteredActivePairs.map((activePairs, i) => (
          <tr key={`entity-${i}`} data-cy="entityTable">
            {/* 原有单元格代码完全保留 */}
            ...........
          </tr>
        ))}
      </tbody>
    </Table>
  ) : (
    // 可选优化：区分全量无数据和筛选后无数据的提示
    !loading && <div className="alert alert-warning">
      {selectedExchange ? '当前选中的Exchange下无匹配数据' : 'No Active Pairs found'}
    </div>
  )}
</div>

注意事项 #

• 原有排序逻辑无需修改，排序规则会自动作用在全量数据上，筛选后仍会保留排序效果
• 如果你的exchangeId需要展示别名而非原始ID，可以修改exchangeOptions的生成逻辑，把ID和对应的展示名称做映射即可

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