feat：小尝试

zxl7 · Sep 18, 2021 · d3ff197 · d3ff197
1 parent 29185a2
commit d3ff197
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 5 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/React/my-app/src/TodoList.js b/React/my-app/src/TodoList.js
@@ -3,23 +3,57 @@ class TodoList extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      inputValue: '123',
-      list: [],
+      inputValue: '',
+      list: ['xxxll', 'xxxllll'],
     }
   }
   render() {
     return (
       <Fragment>
         <div>
-          <input value={this.state.inputValue} onChange={this.handlerChangedInput}></input>
-          <button>提交</button>
+          {/* 这是注释 */}
+          <input
+            value={this.state.inputValue}
+            onChange={this.handlerChangedInput.bind(this)}
+          ></input>
+          <button onClick={this.handleButtonClick.bind(this)}>提交</button>
         </div>
+
+        <ul>
+          {this.state.list.map((item, index) => {
+            return (
+              <li
+                key={index}
+                onClick={this.handleItemDelete.bind(this, index)}
+              >
+                {item}{' '}
+              </li>
+            )
+          })}
+        </ul>
       </Fragment>
     )
   }
 
   handlerChangedInput(e) {
-    console.log(e.target.value)
+    this.setState({
+      inputValue: e.target.value,
+    })
+  }
+  handleItemDelete(index) {
+    this.setState((prevState) => {
+      const list = [...this.state.list]
+      list.splice(index, 1)
+
+      return { list }
+    })
+  }
+
+  handleButtonClick() {
+    this.setState({
+      list: [...this.state.list, this.state.inputValue],
+      inputValue: '',
+    })
   }
 }