Как получить текст выбранной опции <Dropdown /> в ReactJS?

Question

Я работаю над приложением ReactJS и пытаюсь получить текст выбранной опции в раскрывающемся меню (компонент семантического интерфейса);

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

Семантический интерфейс реагирует Dropdown onChange Событие принимает два аргумента - onChange(event: SyntheticEvent, data: object), Вам не нужно передавать их явно при вызове функции.

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

Answer 3

Данные / значение должны иметь выбранный текст опции, как в семантическом пользовательском интерфейсе

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

Answer 4

Вы можете просто сделать

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

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