上下文菜单不反映单击时选中/取消选中

Question

我有一个点击按钮的上下文菜单。最初检查的项目有 3 个。单击每个项目时，我正在切换检查。上下文菜单打开时，选中/取消选中不会反映。这曾经可以更早地工作，但在最新的 react 版本中它看起来已经被破坏了。

sn-p在这里

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 是用硬编码为 true 的 checked 定义的，因此上下文菜单从不呈现那些没有选中标记的菜单。
• 在我的示例中，我将菜单项选中状态置于整体状态，以便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() 函数中，它按预期工作。