ReactJS中如何获取Semantic UI Dropdown选中选项的文本？

嘿，我之前也碰到过一模一样的需求！Semantic UI React的Dropdown组件在onChange回调里其实藏着比单独value更多的有用信息，尤其是当你开启了multiple多选模式的时候。

解决方案：利用selectedOptions参数 #

你只需要修改回调函数，接收第二个参数里的selectedOptions——它是一个数组，包含了所有选中项的完整对象（就是你this.state.campaigns里那些带value和text的对象）。

修改后的代码如下：

exposedCampaignOnChange = (e, { value, selectedOptions }) => {
  // 如果你需要把选中值和对应文本数组都传给父组件
  const selectedTexts = selectedOptions.map(option => option.text);
  this.props.campaignExposedSelected({
    selectedValues: value,
    selectedTexts: selectedTexts
  });

  // 或者直接把整个selectedOptions数组传过去，让父组件自行处理
  // this.props.campaignExposedSelected(selectedOptions);
};

你的Dropdown组件部分不需要改动，保持原写法即可：

<Dropdown
  placeholder='Campaign Exposed To'
  fluid
  search
  selection
  multiple
  options={this.state.campaigns}
  onChange={this.exposedCampaignOnChange}
/>

为什么这能行？ #

当Dropdown设置了multiple属性时，Semantic UI React会在onChange的第二个参数对象中注入selectedOptions，它直接引用你传入的options数组中的选中项对象，所以你不仅能拿到text和value，如果你的对象里有其他自定义属性，也能直接访问到。

小提示 #

确保你的this.state.campaigns数组里的每个对象都符合Semantic UI Dropdown的标准格式，也就是必须包含value和text属性，比如：

this.state = {
  campaigns: [
    { value: 'campaign_001', text: '2024夏季促销活动' },
    { value: 'campaign_002', text: '黑五专属折扣' },
    { value: 'campaign_003', text: '会员专享福利' }
  ]
};

这样就能轻松拿到选中项的文本啦！

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