Семантический пользовательский интерфейс реагирует на выпадающий список

Question

Я пытаюсь создать выпадающий список / выбрать с помощью семантического интерфейса и React, и я хочу, чтобы он отображал галочку на выбранном элементе. мой текущий код:

 groupSelector() {
    let groups = Object.keys(this.state.data).map((val, index) => {
      return {
        text: val,
        value: index,
        image: (
          <span style={{ color: this.state.data[val].Color }}>&#9733;</span>
        )
      };
    });
    return (
      <Dropdown
        placeholder="choose group"
        id="dropdown"
        selection
        fluid
        options={groups}
        onChange={(e, { value }) => {
          this.setGroupToShow(value, e);
        }}
      />
    );
  }

помочь кому-нибудь?

Answer 1

Я бы попытался добиться этого с помощью CSS. Добавьте несколько пользовательских стилей в класс item.selected для этого выпадающего списка. В этих пользовательских стилях вы можете добавить псевдоэлемент с галочкой.