如何在 `@fluentui/react` 中从 `IComboBox` 选择所有选定的选项？

javascript

2024-04-02 21:51:08

在 @fluentui/react 中从 IComboBox 选中所有选定的选项

问题

@fluentui/react 中的 IComboBox 无法选择所有选定的选项，这可能会令人沮丧。让我们探究问题的根源并提供一个解决办法。

解决方案

要从 IComboBox 中选择所有选定的选项，需要遵循以下步骤：

获取对 IComboBox 的引用： 使用 React.createRef 创建一个对 IComboBox 的引用，以便访问其内部状态和方法。
使用 getAllSelectedOptions 函数： @fluentui/react 提供了一个名为 getAllSelectedOptions 的实用程序函数，它可以从 IComboBox 中获取所有选定的选项。
在 onChange 处理程序中使用 getAllSelectedOptions： 在 onChange 处理程序中，使用 getAllSelectedOptions 函数来获取所有选定的选项，然后将它们存储在一个变量中。

示例代码

import * as React from 'react';
import {
  ComboBox,
  getAllSelectedOptions
} from '@fluentui/react';

const MyComboBox = () => {
  const comboBoxRef = React.createRef<IComboBox>();

  const handleOnChange = (_event, _option, _index, value) => {
    const selectedOptions = getAllSelectedOptions(comboBoxRef.current, []);
    console.log(selectedOptions);
  };

  const options = [
    { key: 'option1', text: 'Option 1' },
    { key: 'option2', text: 'Option 2' },
    { key: 'option3', text: 'Option 3' },
  ];

  return (
    <ComboBox
      componentRef={comboBoxRef}
      onChange={handleOnChange}
      multiSelect
      options={options}
    />
  );
};