diff --git a/.eslintcache b/.eslintcache
index 819f61b..12d88d2 100644
--- a/.eslintcache
+++ b/.eslintcache
@@ -1 +1 @@
-[{"/home/blobt/Documents/dev/node/study_react/src/index.js":"1","/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js":"2","/home/blobt/Documents/dev/node/study_react/src/App.js":"3","/home/blobt/Documents/dev/node/study_react/src/Weclome.js":"4","/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js":"5","/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js":"6","/home/blobt/Documents/dev/node/study_react/src/components/DigitalClock.js":"7","/home/blobt/Documents/dev/node/study_react/src/components/CommentBox.js":"8"},{"size":504,"mtime":1608691297173,"results":"9","hashOfConfig":"10"},{"size":362,"mtime":1608686231931,"results":"11","hashOfConfig":"10"},{"size":185,"mtime":1608704872704,"results":"12","hashOfConfig":"10"},{"size":445,"mtime":1608688160052,"results":"13","hashOfConfig":"10"},{"size":690,"mtime":1608692357096,"results":"14","hashOfConfig":"10"},{"size":763,"mtime":1608694717412,"results":"15","hashOfConfig":"10"},{"size":966,"mtime":1608697632407,"results":"16","hashOfConfig":"10"},{"size":1266,"mtime":1608705133968,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"1r5rxns",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/blobt/Documents/dev/node/study_react/src/index.js",[],["37","38"],"/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js",[],"/home/blobt/Documents/dev/node/study_react/src/App.js",[],"/home/blobt/Documents/dev/node/study_react/src/Weclome.js",[],["39","40"],"/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js",[],["41","42"],"/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js",["43"],"/home/blobt/Documents/dev/node/study_react/src/components/DigitalClock.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/CommentBox.js",[],{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","replacedBy":"47"},{"ruleId":"44","replacedBy":"48"},{"ruleId":"46","replacedBy":"49"},{"ruleId":"44","replacedBy":"50"},{"ruleId":"46","replacedBy":"51"},{"ruleId":"52","severity":1,"message":"53","line":15,"column":22,"nodeType":"54","endLine":15,"endColumn":32},"no-native-reassign",["55"],"no-negated-in-lhs",["56"],["55"],["56"],["55"],["56"],"react/no-direct-mutation-state","Do not mutate state directly. Use setState().","MemberExpression","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
+[{"/home/blobt/Documents/dev/node/study_react/src/index.js":"1","/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js":"2","/home/blobt/Documents/dev/node/study_react/src/App.js":"3","/home/blobt/Documents/dev/node/study_react/src/Weclome.js":"4","/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js":"5","/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js":"6","/home/blobt/Documents/dev/node/study_react/src/components/DigitalClock.js":"7","/home/blobt/Documents/dev/node/study_react/src/components/CommentBox.js":"8","/home/blobt/Documents/dev/node/study_react/src/components/CommentBox2.js":"9"},{"size":504,"mtime":1608691297173,"results":"10","hashOfConfig":"11"},{"size":362,"mtime":1608686231931,"results":"12","hashOfConfig":"11"},{"size":188,"mtime":1608705768424,"results":"13","hashOfConfig":"11"},{"size":445,"mtime":1608688160052,"results":"14","hashOfConfig":"11"},{"size":690,"mtime":1608692357096,"results":"15","hashOfConfig":"11"},{"size":763,"mtime":1608694717412,"results":"16","hashOfConfig":"11"},{"size":966,"mtime":1608697632407,"results":"17","hashOfConfig":"11"},{"size":1266,"mtime":1608705133968,"results":"18","hashOfConfig":"11"},{"size":1007,"mtime":1608705894096,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"1r5rxns",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/blobt/Documents/dev/node/study_react/src/index.js",[],["41","42"],"/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js",[],"/home/blobt/Documents/dev/node/study_react/src/App.js",[],"/home/blobt/Documents/dev/node/study_react/src/Weclome.js",[],["43","44"],"/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js",[],["45","46"],"/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js",["47"],"/home/blobt/Documents/dev/node/study_react/src/components/DigitalClock.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/CommentBox.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/CommentBox2.js",[],{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","replacedBy":"51"},{"ruleId":"48","replacedBy":"52"},{"ruleId":"50","replacedBy":"53"},{"ruleId":"48","replacedBy":"54"},{"ruleId":"50","replacedBy":"55"},{"ruleId":"56","severity":1,"message":"57","line":15,"column":22,"nodeType":"58","endLine":15,"endColumn":32},"no-native-reassign",["59"],"no-negated-in-lhs",["60"],["59"],["60"],["59"],["60"],"react/no-direct-mutation-state","Do not mutate state directly. Use setState().","MemberExpression","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index cfda905..7ec9be8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,10 @@
 import './App.css';
-import CommentBox from './components/CommentBox';
+import CommentBox2 from './components/CommentBox2';
 
 function App() {
   return (
     <div className="App">
-      <CommentBox />
+      <CommentBox2 />
     </div>
   );
 }
diff --git a/src/components/CommentBox2.js b/src/components/CommentBox2.js
new file mode 100755
index 0000000..ec42342
--- /dev/null
+++ b/src/components/CommentBox2.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+class CommentBox2 extends React.Component {
+    constructor(props) {
+        super(props);
+        this.submit = this.submit.bind(this);
+    }
+    submit(event) {
+        console.log(this.textInput.value);
+        event.preventDefault();
+    }
+    render() {
+        return (
+            <div>
+                <form className="p-5" onSubmit={this.submit}>
+                    <div className="form-group">
+                        <label>留言内容</label>
+                        <input
+                            type="text"
+                            className="form-control"
+                            placeholder="请输入内容"
+                            ref={(textInput) => { this.textInput = textInput }}
+                        />
+                    </div>
+                    <button type="submit" className="btn btn-primary">留言</button>
+                </form>
+            </div>
+        )
+    }
+}
+
+export default CommentBox2;
\ No newline at end of file