push

photo/src/MiddlePanel.js

@@ -0,0 +1,58 @@
+import React, { Component } from "react";
+import { render } from "react-dom";
+import ImageList from './imageList';
+
+class MiddlePanel extends Component {
+    constructor() {
+        super();
+        this.state = {
+            name: "React",
+            showHideDemo1: false,
+            showHideDemo2: false,
+            showHideDemo3: false
+        };
+        this.hideComponent = this.hideComponent.bind(this);
+    }
+
+    hideComponent(name) {
+        console.log(name);
+        switch (name) {
+            case "showHideDemo1":
+                this.setState({ showHideDemo1: !this.state.showHideDemo1 });
+                break;
+            case "showHideDemo2":
+                this.setState({ showHideDemo2: !this.state.showHideDemo2 });
+                break;
+            case "showHideDemo3":
+                this.setState({ showHideDemo3: !this.state.showHideDemo3 });
+                break;
+        }
+    }
+
+    render() {
+        const { showHideDemo1, showHideDemo2, showHideDemo3 } = this.state;
+        return (
+            <div>
+                {showHideDemo1 && <ImageList />}
+                <hr />
+                {showHideDemo2 && <ImageList />}
+                <hr />
+                {showHideDemo3 && <ImageList />}
+                <hr />
+                <div>
+                    <button onClick={() => this.hideComponent("showHideDemo1")}>
+                        Click to hide Demo1 component
+          </button>
+                    <button onClick={() => this.hideComponent("showHideDemo2")}>
+                        Click to hide Demo2 component
+          </button>
+                    <button onClick={() => this.hideComponent("showHideDemo3")}>
+                        Click to hide Demo3 component
+          </button>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default MiddlePanel;

photo/src/SearchAppMenu.js

@@ -53,6 +53,7 @@ import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import GridList from '@material-ui/core/GridList';
 import GridListTile from '@material-ui/core/GridListTile';
+import MiddlePanel from './MiddlePanel';
 
 const drawerWidth = 240;
 
@@ -202,7 +203,14 @@ export default function ButtonAppBar() {
         setImageOpen(false);
     };
 
+
+    //1
+    const chgPanel = () => {
+        new MiddlePanel().hideComponent("showHideDemo1");
+    }   
     return (
+       
+    
         <div className={classes.root}>
             <AppBar position="fixed" style={{ background: '#2196f3' }} className={
                 clsx(classes.appBar, {
@@ -254,7 +262,7 @@ export default function ButtonAppBar() {
                     <Divider />
                     <List>
                         {['相片', '共享', '相簿', '實用工具'].map((text, index) => (
-                            <ListItem button key={text}>
+                            <ListItem button key={text} onClick={chgPanel}>
                                 <ListItemIcon>{index == 0 ? < PhotoIcon /> : index == 1 ? < ShareIcon /> : index == 2 ? < PhotoAlbumIcon /> : < LibraryAddCheckIcon />}</ListItemIcon>
                                 <ListItemText primary={text} />
                             </ListItem>
@@ -271,8 +279,8 @@ export default function ButtonAppBar() {
                     </List>
             </Drawer>
             <main className={classes.content}>
-                <div className={classes.toolbar}/>
-                <ImageList/> 
+                <div className={classes.toolbar} />
+                <MiddlePanel/>
             </main>
                 <Modal
                     aria-labelledby="transition-modal-title"