React中下拉框onChange触发时如何获取对应表格行数据？

核心思路：渲染每行下拉框时，直接将当前行的关键数据（或整行对象）传递给事件处理函数，无需通过DOM节点间接获取行信息，同时用本地状态维护表格数据，实现无刷新更新。

以下是完整的函数组件示例：

import { useState } from 'react';

// 定义行数据类型
interface IceCreamRow {
  flavorID: number;
  flavor: string;
  // 其他业务字段...
}

const IceCreamTable = ({ initialData }: { initialData: IceCreamRow[] }) => {
  // 用本地state维护表格数据，支持无刷新更新
  const [tableData, setTableData] = useState<IceCreamRow[]>(initialData);

  const handleFlavorChange = async (event: React.ChangeEvent<HTMLSelectElement>, row: IceCreamRow) => {
    const newFlavor = event.target.value;
    try {
      // 调用后端API提交更新，传入所需的flavorID和新口味值
      await backendService.setNewFlavor({
        flavorID: row.flavorID,
        newFlavor
      });
      // 无刷新更新本地表格数据
      setTableData(prevData => 
        prevData.map(item => 
          item.flavorID === row.flavorID 
            ? { ...item, flavor: newFlavor } 
            : item
        )
      );
    } catch (error) {
      console.error('口味更新失败:', error);
    }
  };

  return (
    <table>
      <tbody>
        {tableData.map((row) => (
          <tr key={row.flavorID}> {/* 使用唯一业务ID作为key，避免用数组索引 */}
            <td>
              <select 
                onChange={(e) => handleFlavorChange(e, row)} 
                className="form-select"
                value={row.flavor} {/* 受控组件，保证选中状态与数据同步 */}
              >
                <option value="chocolate">巧克力</option>
                <option value="strawberry">草莓</option>
                <option value="vanilla">香草</option>
              </select>
            </td>
            <td>ID: {row.flavorID}</td>
            <td>当前口味: {row.flavor}</td>
            {/* 其他列渲染... */}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

关键细节说明： #

• 直接传递行数据：通过箭头函数包裹onChange事件，将当前行的row对象直接传入处理函数，无需依赖DOM节点获取索引或数据。
• 受控组件模式：给select设置value={row.flavor}，确保下拉框的选中状态与本地state完全同步，避免UI和数据不一致。
• 无刷新更新：API调用成功后，通过setTableData修改本地状态，React会自动重新渲染表格，实现无刷新的动态更新效果。
• 合理设置key：使用每行唯一的flavorID作为<tr>的key，而非数组索引，提升渲染性能并避免组件复用导致的异常。

简化方案（仅传递ID）： #

如果不需要整行对象，也可以只传递关键的flavorID：

// 事件处理函数调整
const handleFlavorChange = async (event: React.ChangeEvent<HTMLSelectElement>, flavorID: number) => {
  const newFlavor = event.target.value;
  // 调用API并更新state...
};

// 渲染select时调整
<select 
  onChange={(e) => handleFlavorChange(e, row.flavorID)} 
  className="form-select"
  value={row.flavor}
>

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