Checkbox 如何在嵌套菜单项中使用复选框

我想创建一个复选框，里面有三个嵌套元素，每个元素都应该包含一个带有复选框的列表。我的问题是，每当用户单击其中一个复选框时，它不会被选中，但菜单会关闭

此外，我不知道如何在嵌套列表中创建滚动条。至少不是正确的方式。我的解决方法是在MenuItems周围用maxHeight属性包装菜单，但我认为这不是正确的方法。我尝试了几乎所有我能想到的道具（menuListStyle，listStyle，nestedListStyle，…），但都没用

这是我最后一次尝试的代码：

import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import Checkbox from 'material-ui/Checkbox';
import Menu from 'material-ui/Menu';

const UserPermissionButton = () => (
<IconMenu
  iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
  anchorOrigin={{horizontal: 'left', vertical: 'top'}}
  targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
  <MenuItem
    primaryText="Permissions"
    rightIcon={<ArrowDropRight />}
    menuItems={[
      <Checkbox label="Admin" />,
      <Divider />,
      <Checkbox label="Billing" />,
      <Checkbox label="Marketplace" />,
      <Checkbox label="Usercontrol" />,
    ]}
  />

  <MenuItem
    primaryText="Access Groups"
    rightIcon={<ArrowDropRight />}
    style={{maxHeight: 150, overflow: 'auto'}}
    menuItems={[
     <MenuItem key={1} primaryText="Child 1" />,
     <MenuItem key={2} primaryText="Child 2" />,
     <MenuItem key={3} primaryText="Child 3" />,
     <MenuItem key={4} primaryText="Child 4" />,
     <MenuItem key={5} primaryText="Child 5" />,
     <MenuItem key={6} primaryText="Child 6" />,
     <MenuItem key={7} primaryText="Child 7" />,
     <MenuItem key={8} primaryText="Child 8" />,
    ]}
  />

  <MenuItem
    primaryText="Apps"
    rightIcon={<ArrowDropRight />}
    menuItems={[
      <Menu maxHeight={200}>
        <Checkbox label="App" />
        <Checkbox label="App" />
        <Checkbox label="App" />
        <Checkbox label="App" />
        <Checkbox label="App" />
        <Checkbox label="App" />
        <Checkbox label="App" />
        <Checkbox label="App" />
        <Checkbox label="App" />
    </Menu>
    ]}
  />
</IconMenu>
);

export default UserPermissionButton;

从“React”导入React；
从“物料界面/IconMenu”导入IconMenu；
从“物料界面/菜单项”导入菜单项；
从“物料界面/图标按钮”导入图标按钮；
从“物料界面/分割器”导入分割器；
从“材质ui/svg图标/导航箭头右键”导入箭头右键；
从“材料ui/svg图标/导航/更多垂直”导入MoreVertIcon；
从“物料界面/复选框”导入复选框；
从“物料界面/菜单”导入菜单；
const UserPermissionButton=（）=>(
);
导出默认UserPermissionButton；

更新：

代码已更改为：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import Checkbox from 'material-ui/Checkbox';
import Menu from 'material-ui/Menu';

class UserPermissionButton extends Component {

  render() {
    return(
      <IconMenu
        iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
        anchorOrigin={{horizontal: 'left', vertical: 'top'}}
        targetOrigin={{horizontal: 'left', vertical: 'top'}}
      >
        <MenuItem
          primaryText="Permissions"
          rightIcon={<ArrowDropRight />}
          menuItems={[
            <Checkbox label="Admin" />,
            <Divider />,
            <Checkbox label="Billing" />,
            <Checkbox label="Marketplace" />,
            <Checkbox label="Usercontrol" />,
          ]}
        />

        <MenuItem
          primaryText="Access Groups"
          rightIcon={<ArrowDropRight />}
          style={{maxHeight: 150, overflow: 'auto'}}
          menuItems={[
           <MenuItem key={1} primaryText="Child 1" />,
           <MenuItem key={2} primaryText="Child 2" />,
           <MenuItem key={3} primaryText="Child 3" />,
           <MenuItem key={4} primaryText="Child 4" />,
           <MenuItem key={5} primaryText="Child 5" />,
           <MenuItem key={6} primaryText="Child 6" />,
           <MenuItem key={7} primaryText="Child 7" />,
           <MenuItem key={8} primaryText="Child 8" />,
          ]}
        />

        <MenuItem
          primaryText="Apps"
          rightIcon={<ArrowDropRight />}
          menuItems={[
            <Menu maxHeight={200}>
                {this.props.products.products.map(
                  product => <Checkbox key={product.id} label={product.name} />
                )}
          </Menu>
          ]}
        />
      </IconMenu>
    );
  }
}

function mapStateToProps({products}) {
  return {products}
}

export default connect(mapStateToProps)(UserPermissionButton);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“物料界面/IconMenu”导入IconMenu；
从“物料界面/菜单项”导入菜单项；
从“物料界面/图标按钮”导入图标按钮；
从“物料界面/分割器”导入分割器；
从“材质ui/svg图标/导航箭头右键”导入箭头右键；
从“材料ui/svg图标/导航/更多垂直”导入MoreVertIcon；
从“物料界面/复选框”导入复选框；
从“物料界面/菜单”导入菜单；
类UserPermissionButton扩展组件{
render（）{
返回(
)}
]}
/>
);
}
}
函数mapstatetops（{products}）{
返回{products}
}
导出默认连接（MapStateTops）（UserPermissionButton）；

您可以这样做。基本上，使用

状态

，您可以完全控制何时显示

菜单项

<MenuItem
   onTouchTap={() => {
      this.setState({ menuOpen: !this.state.menuOpen })
   }}
   primaryText="Permissions"
   rightIcon={<ArrowDropRight />}
/>
{this.state.menuOpen ? (
  <Menu maxHeight={200}>
    <Checkbox label="App" />
    <Checkbox label="App" />
    <Checkbox label="App" />
    <Checkbox label="App" />
    <Checkbox label="App" />
    <Checkbox label="App" />
    <Checkbox label="App" />
    <Checkbox label="App" />
    <Checkbox label="App" />
  </Menu>): null}

{
this.setState（{menuOpen:！this.state.menuOpen}）
}}
primaryText=“权限”
rightIcon={}
/>
{this.state.menuOpen(
)：null}

换句话说，您的组件现在将具有如下状态：

const UserPermissionButton = React.createClass({
  getInitialState() {
    menuOpen: false
  },

  render () {
    <div>
      <IconMenu
        iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
        anchorOrigin={{horizontal: 'left', vertical: 'top'}}
        targetOrigin={{horizontal: 'left', vertical: 'top'}}
      >
        <MenuItem
          primaryText="Permissions"
          rightIcon={<ArrowDropRight />}
          onTouchTap={() => {
              this.setState({ menuOpen: !this.state.menuOpen })
          }}
        />
      </IconMenu>
      {this.state.openMenu ? (
         <div>
            <Checkbox label="Admin" />,
            <Divider />,
            <Checkbox label="Billing" />,
            <Checkbox label="Marketplace" />,
            <Checkbox label="Usercontrol" />,
         </div>
      ): null}
    </div>
  }
});

const UserPermissionButton=React.createClass({
getInitialState（）{
美诺朋：错
},
渲染（）{
{
this.setState（{menuOpen:！this.state.menuOpen}）
}}
/>
{this.state.openMenu(
,
,
,
,
,
)：null}
}
});

您好，谢谢您的建议，但对我来说不太合适。我不能使用getInitialState（），但将其更改为构造函数（props）{super（props）；this.state={menuOpen:false，}；}可以工作，但主要问题是我有三个菜单项，每个菜单项都有嵌套项。您可以使用this.state.menuOpen&（…）符号而不是this.state.menuOpen？（…）：空