课程结束后自己练习时遇到的ant-design问题

Question

老师你好，我现在开始自己写例子了，在使用ant-design写ui时遇到些问题：1）menu.Item点击被变成选中状态我现在想要实现再次点击取消选中状态的效果；2）使用menu时实现了一个如下图的ui效果，每一个menu.Item就是一个功能我想把它每个menu.Item写成一个组件这样就能将一个功能的代码写在一个组件里了，但是一直报错，我这个想法可实现吗？

<Menu theme="light" mode="inline">

                <MenuTree/>

</Menu>

import React from 'react';

import {Menu,Icon,message,CheckBox,Modal} from 'antd';

export default class MenuTree extends React.Component {

render() {

return (

      <Menu.Item key="1">

        <Icon type="pie-chart" />

        <span>tree</span>

      </Menu.Item>

);

};

}               

Answer 1

Parry 2018-03-27 09:25:00

第一个要自己用逻辑实现

第二个错误是什么？

• 提问者 qq_小江南_04298178 #1

  第二个控制台所有提示信息如下：
  [HMR] Waiting for update signal from WDS...
  bundle.js:34497 Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in  React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
  printWarning @ bundle.js:34497
  bundle.js:113343 Uncaught TypeError: Cannot read property 'indexOf' of undefined
      at Object.isSelected (bundle.js:113343)
      at Object.render (bundle.js:113347)
      at bundle.js:132308
      at measureLifeCyclePerf (bundle.js:131588)
      at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:132307)
      at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:132334)
      at ReactCompositeComponentWrapper.performInitialMount (bundle.js:131874)
      at ReactCompositeComponentWrapper.mountComponent (bundle.js:131770)
      at Object.mountComponent (bundle.js:19023)
      at ReactCompositeComponentWrapper.performInitialMount (bundle.js:131883)
  bundle.js:82138 Timer 'JSAPI loaded' does not exist
  ready @ bundle.js:82138
  bundle.js:66202 [WDS] Hot Module Replacement enabled.

• Parry 回复 提问者 qq_小江南_04298178 #2

  你看看这部分的代码
  Cannot read property 'indexOf' of undefined at Object.isSelected (bundle.js:113343)  
  有错误的。

• 提问者 qq_小江南_04298178 回复 Parry #3

  老师我是使用的ant3.3.3版本这样子就实现了想要的效果：
  
    constructor() {
        super();
        this.state = {
          currentSelectedKey:[]
        };
    }
  
    onCollapse(collapsed){
      this.setState({collapsed: collapsed});
    };
  
    menuItemClick(e){
      if(this.state.currentSelectedKey.indexOf(e.key)!=-1){
        this.setState({currentSelectedKey:[]});
      }else{
        this.setState({currentSelectedKey:[e.key]});
      }
    }
    render() {
        return (
              <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse.bind(this)}>
                <Menu theme="light" selectedKeys={this.state.currentSelectedKey} mode="inline" onClick={this.menuItemClick.bind(this)}>

点开查看后面4条评论