单击时上下文菜单未反映 check/uncheck

Question

我在单击按钮时有一个上下文菜单。最初检查的项目有 3 个。单击每个项目时，我将切换检查。 check/uncheck 在上下文菜单打开时不反映。这曾经可以更早地工作，但对于最新的 React 版本，它看起来已损坏。

片段在这里

import { initializeIcons } from '@uifabric/icons';
import { DefaultButton, IContextualMenuItem, IContextualMenuProps, IContextualMenuStyles } from 'office-ui-fabric-react';
import React from 'react';
initializeIcons();

//Without this style defined, check/uncheck will not reflect in UI.
const cmStyles:Partial<IContextualMenuStyles> = {
    title:{},
    header:{},
    list:{
    },
    root:{
    },
    subComponentStyles:{
        callout:{
            root:{
            }
        },
        menuItem:{}
    },
    container:{
    }
}

const keys: string[] = [
    'Item1',
    'Item2',
    'Item3'
];

interface IState {
    updateUI: boolean;
}

export default class ContextMenuCheck extends React.Component<{}, IState>{
    state:IState = {
        updateUI: false
    }

    constructor(props:any){
        super(props);
    }

    onTogglePlanType = (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem):void => {
        ev && ev.preventDefault();//This will not close the menu
        item.checked = !item.checked;
        this.setState({updateUI:true});
    };

    menuItems: IContextualMenuItem[] = [
        {
          key: keys[0],
          text: keys[0],
          canCheck: true,
          checked: true,
          onClick: this.onTogglePlanType
        },
        {
          key: keys[1],
          text: keys[1],
          canCheck: true,
          checked: true,
          onClick: this.onTogglePlanType
        },
        {
          key: keys[2],
          text: keys[2],
          canCheck: true,
          checked: true,
          onClick: this.onTogglePlanType
        }
    ];

    menuProps: IContextualMenuProps = {
        items:this.menuItems,
        styles: cmStyles
    };

    componentDidMount() {
    }

    render() {
        return (
        <DefaultButton text="Click Me"  menuProps={this.menuProps}/>
        );
    }
}

ReactDOM.render(
  <ContextMenuCheck />, 
  document.getElementById("content")
);

Answer 1

我整理了一个working example here.

你的样品很接近，只是少了一些：

由于 menuItems 被定义为 checked 硬编码为 true，上下文菜单将 永远不会 呈现没有复选标记的那些。
在我的示例中，我将菜单项选中状态置于整体状态中，以便onTogglePlanType能够为每个单独的菜单项设置选中（或未选中）。
最后，menuItems 必须在每个渲染器上重建，以便能够在构建菜单时考虑 checked。

我将 IState 更改为只保留选中的值：

type itemChecked = { [key: string]: boolean };

interface IState {
    checkedMenuItems: itemChecked;  
}

然后我更改了回调以明确设置每个菜单项的值：

onTogglePlanType = (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem):void => {
        ev && ev.preventDefault();
        // Use ... syntax to make a copy of the object
        const itemChecked = { ...this.state.itemChecked }; 
        itemChecked[item.key] = !itemChecked[item.key];

        this.setState({ itemChecked: itemChecked });
    };

然后，通过将 menuItems 的定义移动到 render() 函数中，它按预期工作。

单击时上下文菜单未反映 check/uncheck

Context Menu not reflecting check/uncheck on click

office-ui-fabric

react-tsx

office-ui-fabric-react

fluent-ui