reactjs - 如何在流畅的 UI 中将功能组件转换为类组件？

Question

我正在 Office 结构中创建多选下拉菜单。我看到了代码。它包含功能组件。我想在类组件中进行更改。我们如何将选定的选项存储在状态变量中？请指导我。我是 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}
      />
    );
  }
};