From 13b6399447652ad813a15b29e1c8c09cecce3cae Mon Sep 17 00:00:00 2001 From: blobt Date: Wed, 23 Dec 2020 16:06:49 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E5=86=99=E8=AF=84=E8=AE=BA=E7=95=99?= =?UTF-8?q?=E8=A8=80=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 2 +- src/App.js | 30 ++++++++++++++++++++++++------ src/components/CommentBox2.js | 4 +++- src/components/CommentList.js | 21 +++++++++++++++++++++ 4 files changed, 49 insertions(+), 8 deletions(-) create mode 100755 src/components/CommentList.js diff --git a/.eslintcache b/.eslintcache index 12d88d2..07a89d0 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","/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 +[{"/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","/home/blobt/Documents/dev/node/study_react/src/components/CommentList.js":"10"},{"size":504,"mtime":1608691297173,"results":"11","hashOfConfig":"12"},{"size":362,"mtime":1608686231931,"results":"13","hashOfConfig":"12"},{"size":665,"mtime":1608710449381,"results":"14","hashOfConfig":"12"},{"size":445,"mtime":1608688160052,"results":"15","hashOfConfig":"12"},{"size":690,"mtime":1608692357096,"results":"16","hashOfConfig":"12"},{"size":763,"mtime":1608694717412,"results":"17","hashOfConfig":"12"},{"size":966,"mtime":1608697632407,"results":"18","hashOfConfig":"12"},{"size":1266,"mtime":1608705133968,"results":"19","hashOfConfig":"12"},{"size":1122,"mtime":1608709964056,"results":"20","hashOfConfig":"12"},{"size":606,"mtime":1608709004865,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"1r5rxns",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"31"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"/home/blobt/Documents/dev/node/study_react/src/index.js",[],["45","46"],"/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",[],["47","48"],"/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js",[],["49","50"],"/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js",["51"],"/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",[],"/home/blobt/Documents/dev/node/study_react/src/components/CommentList.js",[],{"ruleId":"52","replacedBy":"53"},{"ruleId":"54","replacedBy":"55"},{"ruleId":"52","replacedBy":"56"},{"ruleId":"54","replacedBy":"57"},{"ruleId":"52","replacedBy":"58"},{"ruleId":"54","replacedBy":"59"},{"ruleId":"60","severity":1,"message":"61","line":15,"column":22,"nodeType":"62","endLine":15,"endColumn":32},"no-native-reassign",["63"],"no-negated-in-lhs",["64"],["63"],["64"],["63"],["64"],"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 7ec9be8..c584eef 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,30 @@ import './App.css'; +import React from 'react'; +import CommentList from './components/CommentList'; import CommentBox2 from './components/CommentBox2'; -function App() { - return ( -
- -
- ); +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + comments: ['this is my first line'] + } + this.add = this.add.bind(this); + } + add(comment) { + this.setState({ + comments: [...this.state.comments, comment] + }); + } + render() { + const { comments } = this.state; + return ( +
+ + +
+ ) + } } export default App; diff --git a/src/components/CommentBox2.js b/src/components/CommentBox2.js index ec42342..33da03e 100755 --- a/src/components/CommentBox2.js +++ b/src/components/CommentBox2.js @@ -6,7 +6,8 @@ class CommentBox2 extends React.Component { this.submit = this.submit.bind(this); } submit(event) { - console.log(this.textInput.value); + //console.log(this.textInput.value); + this.props.onAdd(this.textInput.value); event.preventDefault(); } render() { @@ -23,6 +24,7 @@ class CommentBox2 extends React.Component { /> +

已有 {this.props.count} 条评论

) diff --git a/src/components/CommentList.js b/src/components/CommentList.js new file mode 100755 index 0000000..413bb9a --- /dev/null +++ b/src/components/CommentList.js @@ -0,0 +1,21 @@ +import React from 'react'; + +class CommentList extends React.Component { + render() { + const { comments } = this.props; + return ( +
+ + +
+ ) + } +} + +export default CommentList; \ No newline at end of file