From 9eb1d939022386bc4d8e1973dae4f007ad473825 Mon Sep 17 00:00:00 2001 From: slience2014 <793919316@qq.com> Date: Fri, 15 Apr 2016 16:36:53 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E6=88=91=E2=80=A6=E2=80=A6=E5=8F=AA?= =?UTF-8?q?=E6=9C=89=20=E5=A2=9E=E5=8A=A0=20=E7=9A=84=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=EF=BC=8C=E5=88=A0=E9=99=A4=20=E5=86=99=E4=BA=86=E6=96=B9?= =?UTF-8?q?=E6=B3=95=E7=84=B6=E8=80=8C=E5=B9=B6=E4=B8=8D=E8=83=BD=E7=94=A8?= =?UTF-8?q?=E2=80=A6=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- practice/machi/4/src/component/TodoApp.jsx | 78 ++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 practice/machi/4/src/component/TodoApp.jsx diff --git a/practice/machi/4/src/component/TodoApp.jsx b/practice/machi/4/src/component/TodoApp.jsx new file mode 100644 index 0000000..f7aebc2 --- /dev/null +++ b/practice/machi/4/src/component/TodoApp.jsx @@ -0,0 +1,78 @@ +//TodoApp.jsx +import React, {Component} from 'react' + +class TodoApp extends Component { + constructor() { + super() + this.state = { + inputStr: '', + //设置新状态以便动态获取input里的值 + todoList:[]//设置一个事件数组，存储之前的事件字符串 + // start:false + } + + } + + render() { + // var { dataArray } = this.props + // const tips = getTips(dataArray, this.state.inputStr) + // var tips = this.props.dataArray + console.log(this.state) + + + return ( +
+
+

TODO

+
+ + +
+
+
    + {this.state.todoList.map(item => { + console.log({item}) + console.log("sdsd") + return ( +
  • +
    + + +
    + +
    • //遍历tips然后返回子组件 + ) + })} +
+
+
+
+ ) + } + +} + +function changeHandle(event) { + this.setState({inputStr: event.target.value.trim()}) + +} + +function enterKey(event,dataArray) +{ + if(event.which==13){ + this.setState({todoList:[...this.state.todoList,this.state.inputStr]}) + console.log(this.state.todoList.type) +} +} + +function destroy(item) +{ + console.log(item) + console.log(this) + const index= this.state.todoList.findIndex(item) + this.setState({todoList:this.state.todoList.prototype.slice.call(index,1)}) +} + +export default TodoApp \ No newline at end of file From 8af1da935f8aac2cde2bb5d672684cffbf3099fb Mon Sep 17 00:00:00 2001 From: slience2014 <793919316@qq.com> Date: Fri, 15 Apr 2016 05:09:00 -0500 Subject: [PATCH 2/7] Added files via upload --- practice/machi/4/src/Root.jsx | 20 ++++++++++++++++++++ practice/machi/4/src/main.js | 11 +++++++++++ 2 files changed, 31 insertions(+) create mode 100644 practice/machi/4/src/Root.jsx create mode 100644 practice/machi/4/src/main.js diff --git a/practice/machi/4/src/Root.jsx b/practice/machi/4/src/Root.jsx new file mode 100644 index 0000000..71ddc3a --- /dev/null +++ b/practice/machi/4/src/Root.jsx @@ -0,0 +1,20 @@ +import React, {Component} from 'react' +//import AutoComplete from './component/AutoComplete' +import TodoApp from './component/TodoApp' +const dataArray = ['a', 'ab', 'abc', 'data', 'dataArray'] + +class Root extends Component { + constructor() { + super() + } + render() { + return ( +
+ +
+ ) + } +} + + +export default Root diff --git a/practice/machi/4/src/main.js b/practice/machi/4/src/main.js new file mode 100644 index 0000000..863914f --- /dev/null +++ b/practice/machi/4/src/main.js @@ -0,0 +1,11 @@ +// main.jsx +import React from 'react' +import { render } from 'react-dom' +var dataArray={} +//import Root from './Root' +import TodoApp from './component/TodoApp' + +render( + , + document.getElementById('root') +) \ No newline at end of file From 0221a6a879c2b521cdb4ae1e02d5368ea8bb9cc4 Mon Sep 17 00:00:00 2001 From: slience2014 <793919316@qq.com> Date: Fri, 15 Apr 2016 05:11:41 -0500 Subject: [PATCH 3/7] html --- practice/machi/4/index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 practice/machi/4/index.html diff --git a/practice/machi/4/index.html b/practice/machi/4/index.html new file mode 100644 index 0000000..b8b1a05 --- /dev/null +++ b/practice/machi/4/index.html @@ -0,0 +1,12 @@ + + + + + webpack ES6 react demo + + + +
+ + + From 85eeb54f8548aed2448e295b9068878dcdafcfa2 Mon Sep 17 00:00:00 2001 From: slience2014 <793919316@qq.com> Date: Fri, 15 Apr 2016 18:13:39 +0800 Subject: [PATCH 4/7] Delete Root.jsx --- practice/machi/4/src/Root.jsx | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 practice/machi/4/src/Root.jsx diff --git a/practice/machi/4/src/Root.jsx b/practice/machi/4/src/Root.jsx deleted file mode 100644 index 71ddc3a..0000000 --- a/practice/machi/4/src/Root.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, {Component} from 'react' -//import AutoComplete from './component/AutoComplete' -import TodoApp from './component/TodoApp' -const dataArray = ['a', 'ab', 'abc', 'data', 'dataArray'] - -class Root extends Component { - constructor() { - super() - } - render() { - return ( -
- -
- ) - } -} - - -export default Root From 923a17b8005375648cba284d2a13e39c50554c77 Mon Sep 17 00:00:00 2001 From: slience2014 <793919316@qq.com> Date: Tue, 19 Apr 2016 08:25:50 -0500 Subject: [PATCH 5/7] =?UTF-8?q?=E5=85=B6=E5=AE=9E=E6=98=AF=E6=9C=89?= =?UTF-8?q?=E4=BA=9B=E7=94=BB=E9=A3=8E=E8=AF=A1=E5=BC=82=E7=9A=84=E2=80=A6?= =?UTF-8?q?=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 鍩烘湰鐢ㄤ簡涔嬪墠閭ｄ唤鐨刢ss鏂囦欢鈥︹﹀湪main.js閲屽姞涓婁簡css鏂囦欢锛屽叾浠栫殑娌℃湁鏀瑰姩 --- practice/machi/4/src/component/TodoApp.jsx | 219 +++++++++++++-------- 1 file changed, 142 insertions(+), 77 deletions(-) diff --git a/practice/machi/4/src/component/TodoApp.jsx b/practice/machi/4/src/component/TodoApp.jsx index f7aebc2..239e2fd 100644 --- a/practice/machi/4/src/component/TodoApp.jsx +++ b/practice/machi/4/src/component/TodoApp.jsx @@ -1,78 +1,143 @@ -//TodoApp.jsx -import React, {Component} from 'react' - -class TodoApp extends Component { - constructor() { - super() - this.state = { - inputStr: '', - //设置新状态以便动态获取input里的值 - todoList:[]//设置一个事件数组，存储之前的事件字符串 - // start:false - } - - } - - render() { - // var { dataArray } = this.props - // const tips = getTips(dataArray, this.state.inputStr) - // var tips = this.props.dataArray - console.log(this.state) - - - return ( -
-
-

TODO

-
- - -
-
-
    - {this.state.todoList.map(item => { - console.log({item}) - console.log("sdsd") - return ( -
  • -
    - - -
    - -
    • //遍历tips然后返回子组件 - ) - })} -
-
-
-
- ) - } - -} - -function changeHandle(event) { - this.setState({inputStr: event.target.value.trim()}) - -} - -function enterKey(event,dataArray) -{ - if(event.which==13){ - this.setState({todoList:[...this.state.todoList,this.state.inputStr]}) - console.log(this.state.todoList.type) -} -} - -function destroy(item) -{ - console.log(item) - console.log(this) - const index= this.state.todoList.findIndex(item) - this.setState({todoList:this.state.todoList.prototype.slice.call(index,1)}) -} - +//TodoApp.jsx +import React, {Component} from 'react' +var classNames = require('classnames'); +class TodoApp extends Component { + constructor() { + super() + this.state = { + inputStr: '', + //杈撳叆鐨勫瓧绗︿覆 + todoList:[],//瀛樺偍todo鍒楄〃 + // start:false 鏇村ソ + inputAddStr:'', + index:-1 + // itemClass:[] + } + + } + + render() { + // var { dataArray } = this.props + // const tips = getTips(dataArray, this.state.inputStr) + // var tips = this.props.dataArray + console.log(this.state) + let i =0 + let num=0 + let itemClasses = this.state.todoList.map((item,i) => { + + let itemClass = classNames({ + 'itemText': true, + 'active': i === this.state.index + }); + i=i+1; + return itemClass; + }) + i=0 + return ( +
+
+

TODO

+
+ +
+
+
    + {this.state.todoList.map((item,i) => { + console.log({item}) + console.log("sdsd") + // let i=this.state.index + // this.setState({index:i+1}) + + return ( +
  • +
    + + + + +
    +
    • //杩斿洖涓涓柊tip + ) + })} +
+
+
+
+ ) + } + +} + +function changeHandle(event) { + this.setState({inputStr: event.target.value.trim()}) + +} + +function enterKey(event,dataArray) +{ + if(event.which==13){ + this.setState({todoList:[...this.state.todoList,this.state.inputStr]}) + console.log(this.state.todoList.type) +} +} + +function destroy(item) +{ + console.log(item) + console.log(this) + // const index= item.indexOf(this.state.todoList) + this.setState({todoList:this.state.todoList.filter(function (candidate) { + return candidate !== item})}) + // console.log(index) +} + +function ChangeAdd(event){ + if(event.which==13) { + let i = this.state.todoList.length-1 + + if(this.state.index === i){ + + this.setState({ + todoList: [...this.state.todoList.slice(0, this.state.index), + this.state.inputStr] + ,index:-1 }) + }else{ + i = this.state.index + 1 + this.setState({ + todoList: [...this.state.todoList.slice(0, this.state.index), + this.state.inputStr, this.state.todoList.slice(i)] + ,index:-1 }) + } + } + +} + +function getIndex(item){ + let indexx = this.state.todoList.find(item) + this.setState({index:indexx}) + console.log(this.state.index) + +} + +function ShowInput(event){ + let inputNode = event.target.getElementsByTagName('input'); + let newClassName =classNames('itemText',' active'); + inputNode.className = newClassName; +} +Array.prototype.find=function(item){ + let k=-1 + for(let i=0,n=this.length;i Date: Tue, 19 Apr 2016 08:26:46 -0500 Subject: [PATCH 6/7] Added files via upload --- practice/machi/4/src/main.js | 1 + practice/machi/4/src/style.css | 62 ++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 practice/machi/4/src/style.css diff --git a/practice/machi/4/src/main.js b/practice/machi/4/src/main.js index 863914f..9209e27 100644 --- a/practice/machi/4/src/main.js +++ b/practice/machi/4/src/main.js @@ -1,6 +1,7 @@ // main.jsx import React from 'react' import { render } from 'react-dom' +import './css/style.css' var dataArray={} //import Root from './Root' import TodoApp from './component/TodoApp' diff --git a/practice/machi/4/src/style.css b/practice/machi/4/src/style.css new file mode 100644 index 0000000..10b8095 --- /dev/null +++ b/practice/machi/4/src/style.css @@ -0,0 +1,62 @@ +body{ + width: 90%; + margin: 0 auto; +} + +ul,li{ + list-style: none; +} + +ul,input{ + padding: 0; + margin: 0; +} + +li{ + background-color: #eee; + width: 10.7rem; + height: 1.8rem; + line-height: 1.8rem; + border: 1px #ebc4ff solid; + border-top: 0; +} + +.item{ + position: relative; +} + +.delete{ + position: absolute; + height: 1rem; + top: 0; + bottom: .34rem; + right: .2rem; + margin: auto 0; + border: 0; + outline: 0; + padding: .1rem; + background-color: #eee; + color: #ebc4ff; + font-weight: bold; + font-size: 1.3rem; +} + +.delete::after{ + content: '脳'; +} + +ul.lable{ + width: 10.7rem; +} + +.itemText{ + position: absolute; + + width: 10.4rem; + height: 1.4rem; + display: none; +} + +.active{ + display: block; +} \ No newline at end of file From f3a1157a26602e4788363d1615fcf97d6c52dc9f Mon Sep 17 00:00:00 2001 From: slience2014 <793919316@qq.com> Date: Tue, 19 Apr 2016 21:31:58 +0800 Subject: [PATCH 7/7] =?UTF-8?q?=E7=84=B6=E8=80=8C=E5=A5=97css=E5=B9=B6?= =?UTF-8?q?=E4=B8=8D=E5=AE=8C=E5=85=A8=E3=80=82=E3=80=82=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 鐒惰屽css骞朵笉瀹屽叏銆傘傘 --- practice/machi/4/src/component/TodoApp.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/practice/machi/4/src/component/TodoApp.jsx b/practice/machi/4/src/component/TodoApp.jsx index 239e2fd..2f62424 100644 --- a/practice/machi/4/src/component/TodoApp.jsx +++ b/practice/machi/4/src/component/TodoApp.jsx @@ -73,7 +73,6 @@ class TodoApp extends Component { function changeHandle(event) { this.setState({inputStr: event.target.value.trim()}) - } function enterKey(event,dataArray) @@ -97,9 +96,7 @@ function destroy(item) function ChangeAdd(event){ if(event.which==13) { let i = this.state.todoList.length-1 - if(this.state.index === i){ - this.setState({ todoList: [...this.state.todoList.slice(0, this.state.index), this.state.inputStr] @@ -119,7 +116,6 @@ function getIndex(item){ let indexx = this.state.todoList.find(item) this.setState({index:indexx}) console.log(this.state.index) - } function ShowInput(event){ @@ -140,4 +136,4 @@ Array.prototype.find=function(item){ return -1 } } -export default TodoApp \ No newline at end of file +export default TodoApp