Fluent UI：如何以编程方式打开Dropdown的callout？

• 当前Fluent UI React已支持通过状态属性编程控制Dropdown的callout展开/收起，核心是使用open属性配合状态变量实现。
• 实现示例：

import { Dropdown, IDropdownOption, PrimaryButton } from '@fluentui/react';
import { useState } from 'react';

export const ControlledDropdown = () => {
  // 管理Dropdown的展开状态
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const dropdownOptions: IDropdownOption[] = [
    { key: 'opt1', text: '选项1' },
    { key: 'opt2', text: '选项2' },
    { key: 'opt3', text: '选项3' },
  ];

  return (
    <div style={{ padding: '20px' }}>
      {/* 点击按钮编程打开Dropdown */}
      <PrimaryButton onClick={() => setIsDropdownOpen(true)} text="打开下拉面板" />
      <Dropdown
        options={dropdownOptions}
        // 绑定展开状态
        open={isDropdownOpen}
        // 同步Dropdown自身触发的状态变化
        onOpenChange={(newState) => setIsDropdownOpen(newState)}
        placeholder="请选择选项"
        style={{ marginTop: '10px', width: '200px' }}
      />
    </div>
  );
};

• 版本说明：这个open属性是针对你提到的GitHub议题13259的需求新增的功能，目前已在Fluent UI React v8及以上的正式版本中提供，使用前请确认你的依赖版本符合要求。

内容的提问来源于stack exchange，提问作者Ashit Vora