如何在PrimeReact Listbox的onDoubleClick事件中获取当前值

问题分析 #

你遇到的核心问题有三个：

1. TypeScript类型检查限制：EventTarget类型默认没有ariaLabel属性，即便DOM元素实际存在该属性，TS也会因类型不匹配抛出错误。
2. 类型不兼容：selectedSubClassification状态是包含id和name的对象，但e.target.ariaLabel是字符串，直接赋值会导致类型冲突，同时无法获取id数据。
3. 依赖ariaLabel不可靠：该属性是无障碍辅助属性，并非为传递业务数据设计，依赖它获取值存在稳定性风险。

正确解决方案 #

方案1：通过itemTemplate直接传递选项数据（推荐） #

利用PrimeReact Listbox的itemTemplate属性，在渲染每个选项时给双击事件绑定当前选项对象，直接获取完整业务数据：

<Listbox
  options={subClassifications} // 你的分类选项数组
  optionLabel="name"
  itemTemplate={(option) => (
    <div 
      onDoubleClick={() => setSelectedSubClassification(option)}
      style={{ padding: '8px' }}
    >
      {option.name}
    </div>
  )}
/>

双击时直接将包含id和name的完整选项对象设置到状态中，彻底规避DOM属性依赖和类型问题。

方案2：绑定Listbox的value状态，双击时直接使用 #

如果Listbox已和selectedSubClassification状态绑定，双击事件无需额外获取值，直接调用业务函数即可：

<Listbox
  options={subClassifications}
  optionLabel="name"
  value={selectedSubClassification}
  onChange={(e) => setSelectedSubClassification(e.value)}
  onDoubleClick={() => addDataFromList()}
/>

这种方式下，onChange已同步选中项到状态，双击时直接使用selectedSubClassification即可完成数据更新。

（不推荐）临时解决TypeScript类型报错 #

若你非要通过DOM元素获取值（不建议），可通过类型断言告知TS目标元素类型：

onDoubleClick={(e) => {
  const target = e.target as HTMLElement;
  // 注意：此方式仅能拿到name，无法获取id，仍无法满足状态类型需求
  console.log(target.ariaLabel);
}}

但该方法无法获取id，无法支持你更新mst_sub_classification_id的需求，因此不推荐使用。

代码逻辑验证 #

你的addDataFromList函数逻辑是正确的，只要确保selectedSubClassification被正确设置为包含id和name的对象，即可正常完成数据更新。

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