如何在 ReactJS 中获取所选 <Dropdown/> 选项的文本？

Question

我正在开发一个 ReactJS 应用程序，我正在尝试在下拉列表（语义 UI 组件）中获取所选选项的 文本；

exposedCampaignOnChange = (e, {value}) => {
    this.props.campaignExposedSelected(value);
};

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

以上代码返回值。 this.state.campaigns 由具有value 和text 属性的对象数组组成。除了value，我还想获取选中选项的text值。

感谢有关此事的任何指导。

Answer 1

您可以使用合成事件的目标属性来获取如下文本：

exposedCampaignOnChange = (e, {value}) => {
  e.persist();
  console.log(e.target.textContent);
  this.props.campaignExposedSelected(value);
};

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

Answer 2

语义 ui react Dropdown onChange 事件有两个参数 - onChange(event: SyntheticEvent, data: object)。您不需要在调用函数时显式传递它们。

exposedCampaignOnChange = (e, value) => {
  e.persist();
  this.props.campaignExposedSelected(value);
};

Answer 3

data/value 应该像语义 UI 中那样选择选项文本

function getSelectedTextValue() {
  alert( $('.ui.dropdown').dropdown('get text') + " : " + $('.ui.dropdown').dropdown('get value') );
}