时间戳

首页 > 解决方案 > 如何阻止 Office Fabric Dropdown 选择焦点上的第一个元素？

reactjs - 如何阻止 Office Fabric Dropdown 选择焦点上的第一个元素？

问题描述

我在 React 中使用 Office Fabric 的下拉菜单。我有很多下拉菜单，我很乐意默认选择第一个元素，但我有一些我不想要这种行为。当我第一次单击下拉菜单时，当我在调试器中放置断点时，它onDropdownChange()会被调用。

我能够将事件跟踪到 Dropdown.base.js，在那里我看到了这段代码，如果没有选择任何元素，这似乎会强制关注第一个元素：

        _this._onFocus = function (ev) {
            var _a = _this.state, isOpen = _a.isOpen, selectedIndices = _a.selectedIndices;
            var multiSelect = _this.props.multiSelect;
            var disabled = _this._isDisabled();
            if (!disabled) {
                if (!isOpen && selectedIndices.length === 0 && !multiSelect) {
                    // Per aria
                    _this._moveIndex(ev, 1, 0, -1);
                }
                if (_this.props.onFocus) {
                    _this.props.onFocus(ev);
                }
                _this.setState({ hasFocus: true });
            }
        };

这是我的下拉渲染代码：

        return <Dropdown
            selectedKey={selected}
            placeholder={placeholder}
            ariaLabel={this.props.ariaLabel || this.props.label}
            label={this.props.label}
            onChange={this.onDropdownChange}
            options={this.getDropdownOptions()}
        />

有没有办法解决这个问题？我看到其他人使用办公结构并且没有这种行为，例如带有“列选项”窗格的 VSO（这是我为自己的站点构建的），但我看不到我需要做什么，或者他们是否以某种方式自定义处理它。到目前为止，我唯一的想法是将空白条目作为选项，然后预先选择它。它不仅选择了第一个条目，而且当我第一次单击组合框的下拉列表时，它只选择了第一个选项并且不会弹出打开下拉列表。

标签： reactjsoffice-ui-fabricoffice-fabric

解决方案

事实上，这是默认行为，focus当第一个可用的下拉选项被选中时。覆盖此行为的一个选项是：

a) 引入默认选项

 <Dropdown componentRef={this.dropdownRef}
      styles={dropDownStyles}
      onFocus={this.handleDrownDownFocus}
      options={[
        { key: "All", text: "", disabled: true },
        { key: "A", text: "Option A" },
        { key: "B", text: "Option B" }
      ]}
 />

b）并强制它在focus事件中被选中

private handleDrownDownFocus(ev: React.FormEvent<HTMLDivElement>) {
   const dropDown = this.dropdownRef.current;
   if(dropDown && !this.selectedDefault){
     dropDown.setSelectedIndex(ev,0);
     this.selectedDefault = true
   }
}

这是一个演示

推荐阅读