Как изменить содержимое на основе щелчка по пункту меню в AntD (React UI Library) - PullRequest
Новая
       21

Как изменить содержимое на основе щелчка по пункту меню в AntD (React UI Library)

0 голосов
/ 26 августа 2018

Я следую учебному пособию по AntD Menu от здесь , и оно показывает, как использовать этот компонент. Но я не смог понять, как изменить мой Контент, когда я нажимаю на другую опцию меню. Пробовал много искать, но полезной помощи не нашел. 

 import { Layout, Menu, Icon } from 'antd';

const { Header, Sider, Content } = Layout;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  render() {
    return (
      <Layout>
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Icon type="user" />
              <span>nav 1</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Icon type="video-camera" />
              <span>nav 2</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Icon type="upload" />
              <span>nav 3</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
            Some Conent
          </Content>
        </Layout>
      </Layout>
    );
  }
}

ReactDOM.render(<SiderDemo />, mountNode);

Можете ли вы помочь.

Ответы [ 2 ]

0 голосов
/ 26 августа 2018

Просто оберните ваш тег Layout внутри тега Router react-router-dom. 

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Layout, Menu, Icon } from 'antd';

import Dashboard from './containers/Dashboard/Dashboard';
import Meseros from './containers/Meseros/Meseros';

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

class RouterApp extends Component {

    state = {
        collapsed: false,
    };

    onCollapse = (collapsed) => {
        this.setState({ collapsed });
    }
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    render() {
        return (
            <Router>
                <Layout style={{ minHeight: '100vh' }}>

                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}>
                        <div className="logo" />
                        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                            <Menu.Item key="1">
                                <Icon type="pie-chart" />
                                <span>Deshboard</span>
                                <Link to="/" />
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Icon type="desktop" />
                                <span>Meseros</span>
                                <Link to="/meseros" />
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header style={{ background: '#fff', padding: 0, paddingLeft: 16 }}>
                            <Icon
                                className="trigger"
                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                style={{ cursor: 'pointer' }}
                                onClick={this.toggle}
                            />
                        </Header>
                        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
                            <Route exact path="/" component={Dashboard} />
                            <Route path="/meseros" component={Meseros} />
                        </Content>

                    </Layout>

                </Layout>
            </Router>
        );
    }
}


export default RouterApp;
0 голосов
/ 26 августа 2018

Вы можете связать onClick с вашим MenuItem и повторно визуализировать компонент, щелкнув любой пункт меню. И вы можете сделать свой контент в вашем Constant.js или инициализировать его в состоянии вашего компонента.

Добавить метод onClick 

<Menu.Item 
 key="1"
 onClick={this.handleMenuClick}
 >
          <Icon type="user" />
          <span>nav 1</span>
</Menu.Item>

сделать ручку для MenuItem клика: 

handleMenuClick = event => {
 //you can get here event.target.value
 //filter the content 
 //setState the content your component will re render and content will be updated.

}
...