React select下拉显示Yes/No但传admin/member的更优实现方案

下拉选择器需要对终端用户展示Yes/No文本选项，但向API发起请求时，需要提交选项对应的admin/member角色枚举值。当前实现通过onChange事件里的三元运算符做值映射，功能可正常运行，但需要更优雅、可靠性更高的实现方案。

当前实现代码 #

EditableRole 业务组件 #

export function EditableRole({
  employee,
  onSave,
  onCancel,
}: EditableRoleProps) {

  const [role, setRole] = useState("MEMBER");

  const handleSave = () => api.updateUser(role)


  return (
    <div className={styles.wrapperEditable}>
      <Dropdown
        className={styles.dropdownRole}
        options={["Yes", "No"]}
        value={role}
        onChange={(e) =>
          setRole(e.target.value === "Yes" ? Role.ADMIN : Role.MEMBER)
        }
      />
      <Icon name="tick" onClick={() => handleSave()} />
      <Icon name="cancel" onClick={onCancel} />
    </div>
  );
}

封装的通用Dropdown组件 #

export interface DropdownProps {
  label?: string;
  id?: string;
  options: string[];
  value: string;
  onChange: (e: ChangeEvent<HTMLSelectElement>) => void;
  className?: any;
}

export function Dropdown({
  label,
  id,
  options,
  onChange,
  className,
}: DropdownProps) {
  return (
    <div className={styles.wrapper}>
      <label className={styles.labeltext} htmlFor={id}>
        {label}
      </label>
      <select
        id={id}
        className={cx(className, styles.dropdown)}
        onChange={onChange}
      >
        {options.map((option) => (
          <option key={option}>{option}</option>
        ))}
      </select>
    </div>
  );
}

当前实现的核心问题有两个：

• 封装的Dropdown组件丢失了原生<select>支持的「展示文本/提交值分离」能力，<option>标签未显式设置value属性，默认直接用展示文本作为表单值，才需要在外层业务代码里硬编码映射
• 映射逻辑散落在onChange事件回调中，属于和业务无关的重复逻辑，后续修改选项文案、调整枚举值时很容易漏改，导致传值错误

优化分两步：

1. 重构Dropdown组件，支持结构化选项配置，原生实现展示值和实际值的绑定，不需要业务层做映射
2. 把角色选项的配置抽离为统一常量，所有映射关系集中维护，避免魔法值散落在逻辑中

优化后代码 #

重构后的通用Dropdown组件 #

// 支持两种选项格式：纯文本（展示值和提交值一致）、结构化配置（展示值和提交值分离）
type DropdownOption = string | { label: string; value: string | number };

export interface DropdownProps {
  label?: string;
  id?: string;
  options: DropdownOption[];
  value: string | number;
  onChange: (value: string | number) => void; // 直接返回选中的实际值，不需要业务层读原生事件对象
  className?: string;
}

export function Dropdown({
  label,
  id,
  options,
  value,
  onChange,
  className,
}: DropdownProps) {
  return (
    <div className={styles.wrapper}>
      {label && (
        <label className={styles.labeltext} htmlFor={id}>
          {label}
        </label>
      )}
      <select
        id={id}
        className={cx(className, styles.dropdown)}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      >
        {options.map((option) => {
          // 统一处理两种选项格式
          const optionLabel = typeof option === 'string' ? option : option.label;
          const optionValue = typeof option === 'string' ? option : option.value;
          return (
            <option key={optionValue} value={optionValue}>
              {optionLabel}
            </option>
          )
        })}
      </select>
    </div>
  );
}

优化后的EditableRole业务组件 #

// 角色选项统一配置，映射关系集中维护，后续修改只需要改这里
const ROLE_OPTIONS = [
  { label: 'Yes', value: Role.ADMIN },
  { label: 'No', value: Role.MEMBER }
] as const;

export function EditableRole({
  employee,
  onSave,
  onCancel,
}: EditableRoleProps) {

  const [role, setRole] = useState<Role>(Role.MEMBER);

  const handleSave = () => api.updateUser(role)

  return (
    <div className={styles.wrapperEditable}>
      <Dropdown
        className={styles.dropdownRole}
        options={ROLE_OPTIONS}
        value={role}
        // 不需要再写任何映射逻辑，拿到的直接是合法的Role枚举值
        onChange={setRole}
      />
      <Icon name="tick" onClick={handleSave} />
      <Icon name="cancel" onClick={onCancel} />
    </div>
  );
}

方案优势 #

• 没有硬编码的三元判断散落在业务逻辑中，所有选项的展示/提交值映射集中在常量里维护，后续调整文案、修改枚举值不需要翻业务逻辑
• 重构后的Dropdown组件能力更通用，后续所有需要「展示值和提交值不同」的下拉场景都可以直接复用，不需要重复写映射逻辑
• 状态从始至终存储的都是API需要的合法Role枚举值，不存在映射逻辑写错导致提交非法值的风险，配合TS类型校验可以在编译阶段就发现类型错误，可靠性更高
• 组件onChange直接返回选中的实际值，业务层不需要处理原生事件对象，代码更简洁

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