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

Question

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

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

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

以上代码returns值。 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反应下拉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') );
}

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

How to get text of selected <Dropdown/> option in ReactJS?

reactjs

semantic-ui

semantic-ui-react