如何在嵌套的 MenuItem 中使用复选框

Question

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

另外，我不知道如何在其中一个嵌套列表中创建滚动条。至少不是正确的方法。我的解决方法是在 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;

更新：

代码改成了这样：

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);

Answer 1

你可以这样做。基本上，使用state，您可以完全控制何时显示menuitems。

<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}

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

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>
  }
});