reactjs - 检查 Office UI Fabric React 的下拉组件中的选定菜单选项

Question

我想在下拉菜单中显示选中的菜单选项。我怎样才能做到这一点？

这是代码：

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>
    );
  }
}

这是它呈现的内容： 当前选定的项目上没有复选标记：

Answer 1

首先添加两个方法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}
    />

On Change 方法添加选项选择逻辑

_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>
          </>
        );
      };

注意 - 您的代码可能会根据您的要求更改。

Answer 2

只需添加multiselect属性。

例如：

<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" }
     ]}/>

希望这可以帮助