Реагировать на проблему с приборной панелью - PullRequest
Новая
       8

Реагировать на проблему с приборной панелью

1 голос
/ 24 марта 2020

Я создал одно приложение React. Для стилевого оформления я использую Antd . Я не знаю, как отображать различные компоненты, если я щелкаю элементы панели инструментов, и они отображаются на одном холсте.

Я создал одну кнопку поиска, а также хочу показать результат, тот же холст.

Я хочу сделать такое приложение demo . 

   import React, { useState } from "react";
import "./App.css";
import Table from "./Table";
import AddTableComponent from "./AddTableComponent";
import { Layout, Avatar, Menu, Icon, Breadcrumb, Button, Input } from "antd";
import Title from "antd/lib/typography/Title";
const { Header, Footer, Sider, Content } = Layout;
const { Search } = Input;
function App() {
  const [state, setState] = useState({
    collapsed: false,
    table: false,
    add: false,
    course: false,
    info: false
  });

  const onCollapse = collapsed => {
    setState({ ...state, collapsed });
  };

  const handleMenuClick = event => {
    setState({
      ...state,
      [event]: !state[event]
    });
  };
  return (
    <div className="App">
      <Layout>
        <Header style={{ padding: 10 }}>
          <Avatar style={{ float: "right" }} src="./dp.png" />
          <Title style={{ color: "white" }} level={3}>
            Student data
          </Title>
          <div style={{ paddingLeft: "900px" }}>
            <Search
              placeholder="input search text"
              onSearch={value => console.log(value)}
              style={{ width: 200 }}
            />
          </div>
        </Header>
        <Layout>
          <Sider
            collapsible
            collapsed={state.collapsed}
            onCollapse={onCollapse}
          >
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={["4"]}
              onClick={handleMenuClick}
            >
              <Menu.Item key="table">
                <span className="nav-text">Student table</span>
              </Menu.Item>
              <Menu.Item key="add">
                <span className="nav-text">Add student</span>
              </Menu.Item>
              <Menu.Item key="course">
                <span className="nav-text">Course</span>
              </Menu.Item>
              <Menu.Item key="info">
                <span className="nav-text" link="/Check.js">
                  Information table
                </span>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            <Content style={{ padding: "0 50px" }}>
              <Breadcrumb style={{ margin: "16px 0" }}>
                <Breadcrumb.Item>Data</Breadcrumb.Item>
              </Breadcrumb>
              <div style={{ background: "#fff", padding: 24, minHeight: 580 }}>
                HERO DASHBOARD //THIS IS THE DASH BOARD, I WANT SHOW ALL DATA
                WHEN I WILL CLICK MENU ITEM(Student table,Add
                student,Course,Information table AS WELL THE SEARCH BUTTON)
              </div>
              {state.table && <Table />}
              {state.add && <AddTableComponent />}
            </Content>
            <Footer style={{ textAlign: "center" }}>Copy right-alakdam</Footer>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
}

export default App;

Например: я хочу отображать данные ниже на одной доске da sh, когда пользователь нажимает на таблицу учеников: 

import React from "react";

export default function Check() {
  return (
    <div>
      <table>
        <tr>
          <td>Cell A</td>
          <td>Cell B</td>
        </tr>
      </table>
    </div>
  );
}

Это то, что я сделал до сих пор:

enter image description here

1 Ответ

0 голосов
/ 24 марта 2020

Хорошо, поскольку компонент <Menu> использует обработчик onclick, вы можете использовать его в сочетании с состоянием для отображения ваших компонентов. Это использует ключ для ссылки на состояние. Очевидно, вам необходимо заменить компоненты на компоненты вашей страницы. Если вы посмотрите на docs , это позволит вам посмотреть код меню и увидеть, как работает обработчик onclick. 

import React, { useState } from 'react';
import './App.css';
import Table from './Table';
import AddTableComponent from './AddTableComponent';
import { Layout, Avatar, Menu, Breadcrumb, Input } from 'antd';
import Title from 'antd/lib/typography/Title';
const { Header, Footer, Sider, Content } = Layout;
const { Search } = Input;
function App() {
  const [state, setState] = useState({
    collapsed: false,
    table: false,
    add: false,
    course: false,
    info: false
  });

  const onCollapse = collapsed => {
    setState({ ...state, collapsed });
  };

    const handleMenuClick = event => {
    console.log('event: ', event);
    setState({
      ...state,
      table: false,
      add: false,
      course: false,
      info: false,
      [event.key]: !state[event.key]
    });
  };

  return (
    <div className="App">
      <Layout>
        <Header style={{ padding: 10 }}>
          <Avatar style={{ float: 'right' }} src="./dp.png" />
          <Title style={{ color: 'white' }} level={3}>
            Student data
          </Title>
          <div style={{ paddingLeft: '900px' }}>
            <Search
              placeholder="input search text"
              onSearch={value => console.log(value)}
              style={{ width: 200 }}
            />
          </div>
        </Header>
        <Layout>
          <Sider
            collapsible
            collapsed={state.collapsed}
            onCollapse={onCollapse}
          >
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={['4']}
              onClick={handleMenuClick}
            >
              <Menu.Item key="table">
                <span className="nav-text" href="./">
                  Student table
                </span>
              </Menu.Item>
              <Menu.Item key="add">
                <span className="nav-text">Add student</span>
              </Menu.Item>
              <Menu.Item key="course">
                <span className="nav-text">Course</span>
              </Menu.Item>
              <Menu.Item key="info">
                <span className="nav-text" link="/Check.js">
                  Information table
                </span>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            <Content style={{ padding: '0 50px' }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Data</Breadcrumb.Item>
              </Breadcrumb>
              <div style={{ background: '#fff', padding: 24, minHeight: 580 }}>
                {state.table && <Table />}
                {state.add && <AddTableComponent />}
              </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>Copy right-alakdam</Footer>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
}

export default App;

Ваш компонент таблицы должен выглядеть как 

import React from 'react';

const Table = () => {
  return (
    <div>
      <table>
        <tbody>
          <tr>
            <td>Cell A</td>
            <td>Cell B</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default Table;
...