ボタンをクリックするとコンテキストメニューが表示されます。最初にチェックする項目は 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")
);