antd-导航菜单

水平的顶部导航：点击哪个，哪个就是选中状态，默认选中头条

<Menu  mode="horizontal" selectedKeys={[this.state.current]} onClick={this.handleClick.bind(this)}>

参数mode表示排列方式，selectedKeys的值就和<Menu.Item key="top">的key值相同时，该<Menu.Item key="top">就是选中状态，onClick事件函数的参数表示事件源，即点击哪个菜单元素，e就表示哪个菜单元素

import React from 'react';  
import { Row, Col, Menu, Icon } from 'antd';    
export default class PCHeader extends React.Component {  
    constructor() {  
        super();  
        this.state = {  
            current:"top",  
        };  
    } 
    
    handleClick(e) {
	  this.setState({current: e.key});
	}
    
    render() {  
        return (  
            <header>  
                <Row>  
                    <Col span={4}></Col>  
                    <Col span={16}>  
                        <Menu  mode="horizontal" selectedKeys={[this.state.current]} onClick={this.handleClick.bind(this)}>  
                            <Menu.Item key="top">  
                               <Icon type="appstore" />头条  
                            </Menu.Item>  
                            <Menu.Item key="shehui">  
                               <Icon type="appstore" />社会  
                            </Menu.Item>  
                            <Menu.Item key="guonei">  
                               <Icon type="appstore" />国内  
                            </Menu.Item>  
                            <Menu.Item key="guoji">  
                               <Icon type="appstore" />国际  
                            </Menu.Item>  
                            <Menu.Item key="yule">  
                               <Icon type="appstore" />娱乐  
                            </Menu.Item>  
                            <Menu.Item key="tiyu">  
                               <Icon type="appstore" />体育  
                            </Menu.Item>  
                            <Menu.Item key="keji">  
                               <Icon type="appstore" />科技  
                            </Menu.Item>  
                            <Menu.Item key="shishang">  
                               <Icon type="appstore" />时尚  
                            </Menu.Item>  
                        </Menu>  
                    </Col>  
                    <Col span={4}></Col>  
                </Row>  
            </header>  
        );  
    };  
} 

点击菜单，收起其他展开的所有菜单，官网的模板中，es6的class中，直接写属性，和箭头函数，修改成es6正常写法就可以。

import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;

class Sider extends React.Component {
  // submenu keys of first level
  constructor() {  
        super();  
        this.state = {
            openKeys: ['sub1'],
        };
        
        this.rootSubmenuKeys=['sub1', 'sub2', 'sub4'];
    }
  
  onOpenChange(openKeys){
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
  }
  render() {
    return (
      <Menu
        mode="inline"
        openKeys={this.state.openKeys}
        onOpenChange={this.onOpenChange.bind(this)}
        style={{ width: 256 }}
      >
        <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
          <Menu.Item key="1">Option 1</Menu.Item>
          <Menu.Item key="2">Option 2</Menu.Item>
          <Menu.Item key="3">Option 3</Menu.Item>
          <Menu.Item key="4">Option 4</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
          <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu key="sub4" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu>
      </Menu>
    );
  }
}

ReactDOM.render(<Sider />, document.getElementById('test1'));