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
+
+
+
+
+
+
+
diff --git a/practice/machi/4/src/component/TodoApp.jsx b/practice/machi/4/src/component/TodoApp.jsx
new file mode 100644
index 0000000..2f62424
--- /dev/null
+++ b/practice/machi/4/src/component/TodoApp.jsx
@@ -0,0 +1,139 @@
+//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 (
+
+ )
+ }
+
+}
+
+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,
+ document.getElementById('root')
+)
\ No newline at end of file
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