From 111a0149a9cee7e88b2bce73daa445ab04acab20 Mon Sep 17 00:00:00 2001
From: wzhqwq <wzhii345@outlook.com>
Date: Sat, 17 Jul 2021 23:36:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=A1=B9=E7=9B=AE=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json           |  4 +++-
 src/App.js             | 24 +++++++-----------------
 src/index.js           |  6 ------
 src/index/index.css    |  0
 src/index/index.js     | 13 +++++++++++++
 src/reportWebVitals.js | 13 -------------
 src/upload/upload.css  |  0
 src/upload/upload.js   | 31 +++++++++++++++++++++++++++++++
 8 files changed, 54 insertions(+), 37 deletions(-)
 create mode 100644 src/index/index.css
 create mode 100644 src/index/index.js
 delete mode 100644 src/reportWebVitals.js
 create mode 100644 src/upload/upload.css
 create mode 100644 src/upload/upload.js

diff --git a/package.json b/package.json
index e7095d9..4ea92a8 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,13 @@
 {
-  "name": "react-app-model",
+  "name": "in-my-heart",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "cra-template": "1.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-dropzone": "^11.3.4",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index 3784575..c9c443c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,14 @@
-import logo from './logo.svg';
 import './App.css';
+import { HashRouter, Route } from 'react-router-dom';
+import { AppContainer } from './index/index';
+import { UploadContainer } from './upload/upload';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <HashRouter>
+      <Route path="/" component={AppContainer} />
+      <Route path="/upload" component={UploadContainer} />
+    </HashRouter>
   );
 }
 
diff --git a/src/index.js b/src/index.js
index ef2edf8..6832e78 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -10,8 +9,3 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/index/index.css b/src/index/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/index/index.js b/src/index/index.js
new file mode 100644
index 0000000..0ed4152
--- /dev/null
+++ b/src/index/index.js
@@ -0,0 +1,13 @@
+import { Component } from 'react';
+import './index.css';
+
+// copilot抄来的模板
+export class AppContainer extends Component {
+  render() {
+    return (
+      <div className="App">
+        {this.props.children}
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
diff --git a/src/upload/upload.css b/src/upload/upload.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/upload/upload.js b/src/upload/upload.js
new file mode 100644
index 0000000..35129c9
--- /dev/null
+++ b/src/upload/upload.js
@@ -0,0 +1,31 @@
+import { Component } from 'react';
+import './upload.css';
+
+// copilot抄来的模板
+export class UploadContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      files: []
+    };
+  }
+
+  handleChange = (e) => {
+    const files = e.target.files;
+    this.setState({ files });
+  };
+
+  render() {
+    return (
+      <div className="upload-container">
+        <input type="file" onChange={this.handleChange} />
+        {this.state.files.map((file, i) => (
+          <div key={i} className="upload-item">
+            <img className="upload-item-img" src={file.preview} />
+            <p className="upload-item-name">{file.name}</p>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
\ No newline at end of file