React Select组件onChange事件如何传递MenuItem的OrgName值？

有两种简单的方法可以实现你要的需求，直接看代码和说明：

方法一：将整个option对象作为MenuItem的value #

把<MenuItem>的value从option.OrgId改成整个option对象，触发onChange时，event.target.value就包含了OrgId和OrgName所有信息，直接传给处理函数即可。

修改后的代码：

<Select
  className="navigation_select"
  disableUnderline
  defaultValue={
    selectedOrg === "0"
      ? info?.orgs?.find((x: { Default: boolean }) => x.Default === true)
      : info?.orgs?.find((x: { OrgId: string }) => x.OrgId === selectedOrg)
  }
  variant="standard"
  onChange={(event) => {
    // event.target.value现在是完整的option对象，包含OrgId和OrgName
    handledealernameChange(event.target.value.OrgId, event.target.value.OrgName);
  }}
>
  {info?.orgs?.map((option, i) => (
    <MenuItem value={option} key={option.OrgId}> {/* 用OrgId当key更稳妥，避免索引重复导致的渲染问题 */}
      {option.OrgName}
    </MenuItem>
  ))}
</Select>

注意：defaultValue也要改成对应的完整option对象，而不是单独的OrgId；另外key用option.OrgId比索引i更可靠，不会因为数组顺序变化导致组件重复渲染。

方法二：通过选中的OrgId匹配对应的OrgName #

保持原来的value为OrgId不变，在onChange事件里，用选中的OrgId去info.orgs数组里找到对应的option，取出OrgName再传给处理函数。

修改后的代码：

<Select
  className="navigation_select"
  disableUnderline
  defaultValue={
    selectedOrg === "0"
      ? info?.orgs?.find((x: { Default: boolean }) => x.Default === true)
          ?.OrgId
      : selectedOrg
  }
  variant="standard"
  onChange={(event) => {
    const selectedOrgId = event.target.value;
    // 根据选中的OrgId找到对应的option
    const selectedOption = info?.orgs?.find(opt => opt.OrgId === selectedOrgId);
    if (selectedOption) {
      handledealernameChange(selectedOrgId, selectedOption.OrgName);
    }
  }}
>
  {info?.orgs?.map((option, i) => (
    <MenuItem value={option.OrgId} key={option.OrgId}>
      {option.OrgName}
    </MenuItem>
  ))}
</Select>

这种方法不需要修改defaultValue的结构，适合不想改动原有默认值逻辑的场景。

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