Question

我遇到了麻烦。
但我不能用英文写文字......
※可能难以阅读，但请原谅我。

我想选择ListItem组件，但ListItem映射结构不能选择。

我期待的是这个。

※在页面底部

我输出的渲染结果是这个。
result

ReactJS代码就是这个。

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

./ mails就是这个。

export default [
      {
        id: 1,
        primaryText: "test1"
        ,
        menu: [
          {
            id: 2,
            primaryText: "test2"
          },
          {
            id: 3,
            primaryText: "test3"
          },
          {
            id: 4,
            primaryText: "test4"
          },
          {
            id: 5,
            primaryText: "test5" 
            ,
            menu: [
              {
                id: 6,
                primaryText: "test6" 
              },
              {
                id: 7,
                primaryText: "test7" 
              }]
          }],
      },
      {
        id: 8,
        primaryText: "test8"
      },
      {
        id: 9,
        primaryText: "test9"
      }
    ];

如有必要，将添加其他信息。谢谢你的阅读。

Answer 1

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

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

ReactJs地图结构无法按材料选择-ui可选列表组件

1 个答案: