Контекстное меню не отображает отметку / снятие отметки при нажатии

Question

У меня есть контекстное меню при нажатии кнопки. Изначально проверяются 3 пункта. При щелчке по каждому элементу я переключаю проверку. Флажок / снятие флажка не отображается, пока открыто контекстное меню. Раньше это работало, но с последними версиями реакции похоже, что это не работает.

Фрагмент здесь

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

Я собрал здесь рабочий пример.

Ваш образец близок, просто было несколько недостающих частей:

• поскольку 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() функция, она работает должным образом.