微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决Fluent UI React 状态始终重置为默认值

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

我按如下方式构建 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' },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 框架中的错误吗?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。