Javascript ReactJs映射结构可以'；t按物料选择ui可选列表组件

我有麻烦了。
但是我不能很好地用英语写课文…
※可能很难阅读，但请原谅我

---

我想选择ListItem组件，但ListItem映射结构无法选择

我期待的是这个

※在页面底部

我的输出的渲染结果如下。

代码是这样的

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import emails from './mails'
import {List, ListItem, makeSelectable} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import ActionGrade from 'material-ui/svg-icons/action/grade';
import Toggle from 'material-ui/Toggle';
import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin();
import PropTypes from 'prop-types';

let SelectableList = makeSelectable(List);

function wrapState(ComposedComponent) {
  return class SelectableList extends React.Component<{defaultValue: number}, {selectedIndex: number}>  {
    static propTypes = {
      children: PropTypes.any.isRequired, 
    };
    constructor(props){
      super(props);
      this.handleRequestChange = this.handleRequestChange.bind(this);
    };

    componentWillMount() {
      this.setState({
        selectedIndex: this.props.defaultValue,
      });
    }

    handleRequestChange = (event, index) => {
      this.setState({
        selectedIndex: index,
      });
    };

    render() {
      let children = React.Children.toArray(this.props.children);
      return (
        <ComposedComponent
          value={this.state.selectedIndex}
          onChange={this.handleRequestChange}
        >
          {children}
        </ComposedComponent>
      );
    }
  };
}

SelectableList = wrapState(SelectableList);


class App extends React.Component<any, any>{
  constructor(props){
        super(props);
        this.state = {
            open: true,
        };

        this.handleToggle = this.handleToggle.bind(this);
    };

  handleNestedListToggle = (item) => {
        this.setState({
            open: item.state.open,
        });
   };

  handleToggle = (e) => {
        console.log("event", e);
        this.setState({
        open: !this.state.open,
        });
  };


  render () {
    const mapStructure = (nodes) => {
    if (nodes) {
      return nodes.map((node, index) => (      
        <ListItem
          value={node.id}
          key={index}
          primaryText={node.primaryText}
          leftIcon={<ActionGrade />}
          initiallyOpen={this.state.open}
          primaryTogglesNestedList={true}
          onNestedListToggle={this.handleNestedListToggle}
          onTouchTap={this.handleToggle}
          nestedItems={mapStructure(node.menu)}
        />
      ));
    }
  };

    return (
      <div>
        <br />
          <MuiThemeProvider>
            <div>
                <Subheader>list</Subheader>
                  <SelectableList>
                    {mapStructure(emails)}
                  </SelectableList> 
          </div>        
        </MuiThemeProvider>
      </div>  
    )
  }  
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

如有必要，将添加其他信息。

---

感谢阅读。

我认为问题在于列表切换属性： PrimaryTogglesEndList，OnTestEndList Toggle。也许它们以某种方式覆盖了SelectableList click事件的常规行为。尝试删除它们，看看它是否适合您：

<ListItem
  value={node.id}
  key={index}
  primaryText={node.primaryText}
  leftIcon={<ActionGrade />}
  initiallyOpen={this.state.open}
  onTouchTap={this.handleToggle}
  nestedItems={mapStructure(node.menu)}
/>

---

非常感谢！！很抱歉此外，再一次。当然，我移除了它们，所以输出可以正常移动。如果可能，我希望通过单击目标矩形框来打开/关闭切换。例如，如果我单击“test5”矩形框，那么“test6”和“test7”也将关闭。（我不希望用户点击右键打开/关闭按钮，因为它看起来有点难理解。）如果可能，请教我如何实现。

<ListItem
  value={node.id}
  key={index}
  primaryText={node.primaryText}
  leftIcon={<ActionGrade />}
  initiallyOpen={this.state.open}
  onTouchTap={this.handleToggle}
  nestedItems={mapStructure(node.menu)}
/>