React的todolist小例子

React的todolist小例子

import React，{Component} from 'react'

class Todolist extends Component{ //class后面的类名必须首字母大写
   state={
       datalist:["1111","2222","3333"],
       mytext:""  //自定义一个mytext状态初始值
   }
    render(){

        return (
            <div>
            //初始状态值空字符串
            <input type="text" value={this.state.mytext} onChange={(evt)=>{
            console.log(evt.target.value)
            //可以立即同步这个value跟自己定义的mytext同步
            this.setState({
                mytext:evt.target.value
            })
            }}/> //只要改变value值就能触发事件 官方认定onChange事件

            <button onClick={this.handleClick}>add</button>
            <ul>
            {
                this.state.datalist.map((item,index)=>
                <li key={item}>{item}
                <button onClick={()=>this.handDelClick(index)}>delete</button>
                //每次点击传索引值
                </li>
                )//利用map方法遍历数组
            }
            </ul>    
            </div>
        )
    }
    handleClick=()=>{
        //this.state.datalist.push(this.state.mytext)//这样会报警告不要直接修改状态
        this.setState({   //react中不能通过状态直接更改 用setState改变状态
        datalist:[...this.state.datalist,this.state.mytext]，
        mytext:""//点击添加按钮除了合并字符串还有就是清空
        //利用展开运算符把之前的datalist给扒开，把里头的每一个元素给拿出来，不会影响原数组,再把取到的值披上去
        })//react不是get set拦截
    }
     handDelClick=(index)=>{
         //datalist复制一份修改新的datalist
       //  var newlist=this.state.dataliat//引用赋值，浅复制

       //这里面 concat ，slice，[...]都合适
       //一·let newlist=this.state.datalist.slice()//slice是截取数组中的某几个
       //二·let newlist=[...this.state.datalist]
       newlist.splice(index,1)

           var newlist=this.state.dataliat
              this.setState({
             datalist:newlist
         })
    }
}
export default Todolist