Question

我在单击列标题时显示一个下拉菜单，但在事件处理程序中，所有状态都重置为初始值。

我按如下方式构建 DetailsLis：

<ShimmeredDetailsList
                setKey="set"
                items={props.items}
                columns={columns}
                onRenderItemColumn={_renderItemColumn}
                enableShimmer={serviceListLoading}
                ariaLabelForShimmer="Content is being fetched"
                ariaLabelForGrid="Item details"
                selectionMode={SelectionMode.none}
                onItemInvoked={_onItemInvoked}
                onColumnHeaderContextMenu={_onColumnHeaderContextMenu}
                ariaLabelForSelectionColumn="Toggle selection"
                // onActiveItemChanged={this.rowSelectChange}
                //onColumnHeaderClick={this._onColumnClick} /*How does this event handler work?!?!*/
                ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                checkButtonAriaLabel="Row checkbox"
            />
            <ContextualMenu {...contextMenuProps}></ContextualMenu>

只要我点击列标题，函数 _onColumnHeaderContextMenu 就会被调用，如下所示：

const _onColumnHeaderContextMenu = (column, ev) => {

        // const { key } = column;

        console.log(props.items);
        debugger;

        const items = [
            {
                key: 'aToZ',
                name: 'A to Z',
                iconProps: { iconName: 'SortUp' },
                canCheck: true,
                onClick: (ev) => {

                    ev.currentTarget.checked = true;

                }
            },
            {
                key: 'zToA',
                name: 'Z to A',
                iconProps: { iconName: 'SortDown' },
                canCheck: true,
                checked: column.isSorted && column.isSortedDescending,
            }
        ];

         const properties = {
            items: items,
            target: ev.currentTarget,
            directionalHint: DirectionalHint.bottomLeftEdge,
            gapSpace: 10,
            isBeakVisible: true,
            onDismiss: onContextualMenuDismissed
        }

        setContextMenuProps(properties);


    }

props.items 现在对应一个空数组，它是状态的初始值。这不应该是这种情况，因为这个状态已经在初始渲染期间设置并且不会被覆盖。

作为测试，我实现了一个调用相同函数的简单按钮：

<button onClick={_onColumnHeaderContextMenu}>TEST</button>

如果函数是通过按钮执行的，状态会保持其正确的值，在我的例子中是在初始渲染期间设置的服务数组。

在我看来，问题仅与下拉菜单或上下文菜单有关。

这可能是 FluentUI 框架中的错误吗？

Fluent UI React 状态始终重置为默认值

0 个答案: