反应仪表板问题

Question

我创建了一个 React 应用程序。对于仪表板样式，我使用 Antd。我不知道点击dashboard items怎么显示不同的组件，会显示在一个canvas.

我创建了一个搜索按钮，我也想显示结果，同样canvas。

我想做一个这样的应用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;

例如：我想在用户单击学生时在一个仪表板上显示以下数据 table:

import React from "react";

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

这是我到目前为止所做的：

Answer 1

好吧，由于 <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;

您的 table 组件应该看起来像

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;

反应仪表板问题

React Dashboard issue

dashboard

reactjs

antd