如何在流利的 UI 中将函数组件转换为 class 组件？

Question

我正在 Office select 中创建多个下拉菜单 fabrics.I 看到 code.It 包含 component.I 的功能 class [=20] =] 我们如何将 selected 选项存储在状态变量中？请指导 me.I 我是 spfx 分享点的新人。

代码如下：-

import * as React from 'react';
import { Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownStyles } from 'office-ui-fabric-react/lib/Dropdown';

const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 300 } };

const DropdownControlledMultiExampleOptions = [
  { key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'orange', text: 'Orange', disabled: true },
  { key: 'grape', text: 'Grape' },
  { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
  { key: 'vegetablesHeader', text: 'Vegetables', itemType: DropdownMenuItemType.Header },
  { key: 'broccoli', text: 'Broccoli' },
  { key: 'carrot', text: 'Carrot' },
  { key: 'lettuce', text: 'Lettuce' },
];

export const DropdownControlledMultiExample: React.FunctionComponent = () => {
  const [selectedKeys, setSelectedKeys] = React.useState<string[]>([]);

  const onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    if (item) {
      setSelectedKeys(
        item.selected ? [...selectedKeys, item.key as string] : selectedKeys.filter(key => key !== item.key),
      );
    }
  };

  return (
    <Dropdown
      placeholder="Select options"
      label="Multi-select controlled example"
      selectedKeys={selectedKeys}
      onChange={onChange}
      multiSelect
      options={DropdownControlledMultiExampleOptions}
      styles={dropdownStyles}
    />
  );
};

Answer 1

您可以执行以下操作：

export class DropdownControlledMultiExample extends React.Component {
  state = {
    selectedKeys: []
  }

  onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    if (item) {
      this.setState({
        selectedKeys:
          item.selected
            ? [...this.state.selectedKeys, item.key as string]
            : this.state.selectedKeys.filter(key => key !== item.key),
      });
    }
  };
  render() {
    return (
      <Dropdown
        placeholder="Select options"
        label="Multi-select controlled example"
        selectedKeys={this.state.selectedKeys}
        onChange={this.onChange}
        multiSelect
        options={DropdownControlledMultiExampleOptions}
        styles={dropdownStyles}
      />
    );
  }
};

如何在流利的 UI 中将函数组件转换为 class 组件？

How to convert function component to class component in fluent UI?

reactjs

sharepoint

fabricjs

spfx

fluent-ui