Отметьте выбранный вариант меню в раскрывающемся компоненте Office UI Fabric React.

Я хочу, чтобы выбранный параметр меню был отмечен в раскрывающемся списке. Как я могу это сделать?

Вот код:

import * as React from "react";
import { Dropdown } from "office-ui-fabric-react/lib/Dropdown";
import * as styles from "./dropdownMenu.scss";
import { ResponsiveMode } from "office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode";

export class DropDownMenu extends React.Component<{}, {}> {
  public render() {
    return (
      <div className={styles.size}>
        <Dropdown
          placeHolder="Select an option"
          id="timeFilterMenu"
          ariaLabel="Select a time filter for the analytics"
          defaultSelectedKey="B"
          options={[
            { key: "A", text: "Last 7 days" },
            { key: "B", text: "Last 28 days" }
          ]}
        />
      </div>
    );
  }
}

Вот что он отображает: нет галочки на текущем выбранном элементе: введите описание изображения здесь


reactjs typescript drop-down-menu office-ui-fabric
person Vardhan Dugar    schedule 05.04.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Просто добавьте атрибут multiselect.

Eg: 

<Dropdown
     multiselect
     placeHolder="Select an option"
     id="timeFilterMenu"
     ariaLabel="Select a time filter for the analytics"
     defaultSelectedKey="B"
     options={[
        { key: "A", text: "Last 7 days" },
        { key: "B", text: "Last 28 days" }
     ]}/>

Надеюсь это поможет

person Ashik Paul    schedule 20.08.2018

arrow_upward
0
arrow_downward

Сначала добавьте два метода onChange и onRenderOption

<Dropdown
      placeHolder="Select an option"
      id="timeFilterMenu"
      ariaLabel="Select a time filter for the analytics"
      defaultSelectedKey="B"
      options={[
        { key: "A", text: "Last 7 days" },
        { key: "B", text: "Last 28 days" }
      ]}
      onRenderOption={this.onRenderOption}
      onChange={this._onChange}
    />

При изменении метода добавления логики выбора варианта

_onChange = (
        event: React.FormEvent<HTMLDivElement>,
        selectedOption: IDropdownOption,
      ) => {
         selectedOption.isChecked = !selectedOption.isChecked 
         this.forceUpdate()
      }

А затем добавьте логику метода onRender

private onRenderOption = (option: any) => {
        return (
          <>       
            <div className={option.isChecked ? 'ms-Icon ms-Icon--CheckMark' : ''}>
              {option.text}
            </div>
          </>
        );
      };

Примечание. Ваш код может измениться в соответствии с вашими требованиями.

person Mahendra Kulkarni    schedule 22.11.2020