React中显示下拉框选中文本而非值并移除短横线

这问题我碰到过好几次，其实核心就是把选中的value映射回对应的选项文本，再处理掉短横线就行，给你分步来：

1. 统一管理下拉选项数据 #

首先把下拉框的选项整理成结构化的数组，方便后续在多个组件里复用：

// 可以放在组件外部或者作为组件的静态属性
const categoryOptions = [
  { value: 'electronics', label: 'Electronics' },
  { value: 'home-appliances', label: 'Home Appliances' },
  { value: 'sports-equipment', label: 'Sports Equipment' }
];

2. 重构Form.js的下拉框渲染 #

用上面的数组循环渲染选项，避免硬编码，同时保证value和label一一对应：

// Form.js里的select部分
<select value={this.state.category} onChange={this.onCategoryChange}>
  {categoryOptions.map(option => (
    <option key={option.value} value={option.value}>
      {option.label}
    </option>
  ))}
</select>

3. 在ListItem.js中映射并处理文本 #

写个简单的辅助函数，根据当前选中的category值找到对应的label，再把短横线替换成空格：

// ListItem.js里的辅助函数
const getCategoryLabel = (categoryValue) => {
  const matchedOption = categoryOptions.find(opt => opt.value === categoryValue);
  // 找到对应选项就替换短横线，没找到就返回原值（也可以自定义默认文本）
  return matchedOption ? matchedOption.label.replace(/-/g, ' ') : categoryValue;
};

// 然后在JSX中使用
<span>Category: {getCategoryLabel(category)}</span>

这样处理后，展示的就是选项的文本内容，所有短横线也会被替换成空格啦。如果是函数组件，逻辑完全一样，只是state用useState来管理就行。

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