From a9d7608f53949cbea22cc8380a21e9a5bf0443f7 Mon Sep 17 00:00:00 2001 From: blobt Date: Wed, 23 Dec 2020 14:33:48 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=8F=97=E6=8E=A7=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=AE=8C=E6=88=90=E8=A1=A8=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 2 +- src/App.js | 9 +++---- src/components/CommentBox.js | 43 ++++++++++++++++++++++++++++++++++ src/components/DigitalClock.js | 35 +++++++++++++++++++++++++++ src/components/LikesButton.js | 1 + 5 files changed, 83 insertions(+), 7 deletions(-) create mode 100755 src/components/CommentBox.js create mode 100755 src/components/DigitalClock.js diff --git a/.eslintcache b/.eslintcache index 0b6abec..819f61b 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"},{"size":504,"mtime":1608691297173,"results":"7","hashOfConfig":"8"},{"size":362,"mtime":1608686231931,"results":"9","hashOfConfig":"8"},{"size":373,"mtime":1608693565331,"results":"10","hashOfConfig":"8"},{"size":445,"mtime":1608688160052,"results":"11","hashOfConfig":"8"},{"size":690,"mtime":1608692357096,"results":"12","hashOfConfig":"8"},{"size":678,"mtime":1608694636928,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"1r5rxns",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/blobt/Documents/dev/node/study_react/src/index.js",[],["28","29"],"/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js",[],"/home/blobt/Documents/dev/node/study_react/src/App.js",["30"],"/home/blobt/Documents/dev/node/study_react/src/Weclome.js",[],["31","32"],"/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js",["33"],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"38","severity":1,"message":"39","line":1,"column":8,"nodeType":"40","messageId":"41","endLine":1,"endColumn":12},{"ruleId":"34","replacedBy":"42"},{"ruleId":"36","replacedBy":"43"},{"ruleId":"44","severity":1,"message":"45","line":14,"column":22,"nodeType":"46","endLine":14,"endColumn":32},"no-native-reassign",["47"],"no-negated-in-lhs",["48"],"no-unused-vars","'logo' is defined but never used.","Identifier","unusedVar",["47"],["48"],"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"},{"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 diff --git a/src/App.js b/src/App.js index 2ecc67e..cfda905 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,10 @@ -import logo from './logo.svg'; import './App.css'; -import NameCard from './components/NameCard'; -import LikesButton from './components/LikesButton'; -const tags = ['php','cpp','js']; +import CommentBox from './components/CommentBox'; + function App() { return (
- - +
); } diff --git a/src/components/CommentBox.js b/src/components/CommentBox.js new file mode 100755 index 0000000..0c170fc --- /dev/null +++ b/src/components/CommentBox.js @@ -0,0 +1,43 @@ +import React from 'react'; + + +class CommentBox extends React.Component { + constructor(props) { + super(props); + this.state = { + value: '' + } + this.change = this.change.bind(this); + this.submit = this.submit.bind(this); + } + change(event) { + this.setState({ + value: event.target.value + }); + } + submit(event){ + console.log(this.state.value); + event.preventDefault();//阻止默认的提交行为 + } + render() { + return ( +
+
+
+ + +
+ +
+
+ ) + } +} + +export default CommentBox; \ No newline at end of file diff --git a/src/components/DigitalClock.js b/src/components/DigitalClock.js new file mode 100755 index 0000000..f20f5b2 --- /dev/null +++ b/src/components/DigitalClock.js @@ -0,0 +1,35 @@ +import React from 'react'; + +class DigitalClock extends React.Component{ + constructor(props){ + super(props); + this.state = { + date: new Date() + } + } + //这个是react的生命周期函数，插件挂载成功时候被调用 + componentDidMount(){ + this.timer = setInterval(() => { + this.setState({ + date: new Date() + }); + },1000); + } + //生命周期函数，组件发生改变时候被调用 + componentDidUpdate(currentProps, currentState){ + console.log(currentState); + } + //生命周期函数，组件卸载时候被调用 + componentWillUnmount(){ + clearInterval(this.timer); + } + render(){ + return( +
+

{this.state.date.toLocaleTimeString()}

+
+ ) + } +} + +export default DigitalClock; \ No newline at end of file diff --git a/src/components/LikesButton.js b/src/components/LikesButton.js index 95e32e8..7dc0c3a 100755 --- a/src/components/LikesButton.js +++ b/src/components/LikesButton.js @@ -10,6 +10,7 @@ class LikesButton extends React.Component { this.increase = this.increase.bind(this) } increase(){ + //state的值是不能直接修改的，只能使用setState方法去修改 this.setState({ count: ++this.state.count })