todolist 用户在input框里输入的值,添加到下方列表,点击删除按钮,删除对应值

1、根据this. refs. xx 拿到input框里的值

2、再用数组的深拷贝方法,填入到新的数组(可以用数组的展开运算符如下),切记不能用浅拷贝,如(var newlist = this. state. datalist),或者直接修改原数组

3、最后调用数组的map方法,依次遍历

# [补充] 数组的深拷贝

# 三种数组深拷贝,不会影响原数组的情况

var arr = [1, 2, 3]
var newArr1 = arr. concat()
var newArr2 = arr. slice()
var newArr3 = [... arr]
import React from 'react'

class App extends React. Component{
  state = {

    datalist: []

  }

  render() {

    return <div>
      <input type="text" ref="mytext"></input>
      <button onClick={this.handleClick}>add</button>
      {/* JSX语法中不加{},会当作普通字符来对待,而不是变量 */}
      {
        this.state.datalist.map((item,index) => 
          <li key={index}>
            {item}
            {/* 传参(index) 写法一 */}
            {/* <button onClick={this.handleDelClick.bind(this, index)}>del</button> */} 

            {/* 传参(index) 写法二 */}
            <button onClick={() => this.handleDelClick(index)}>del</button>
          </li>
        )
      }
    </div>

  }
  handleClick = () => {

    this.setState({
      /* 不要直接修改原状态 */
      datalist: [...this.state.datalist, this.refs.mytext.value] // concat[...]
    }, () => {
      this.refs.mytext.value = ''
      })

  }
  handleDelClick = (index) => {

    var newlist = this.state.datalist.slice()
    newlist.splice(index, 1) // 在 index 索引上,删除一个元素
    this.setState({
      datalist: newlist
    })

  }
  
}

export default App