React学习打卡Day03

1.todolist案例
        1）获取标签的内容需要借用ref属性，不直接修改标签的Dom
        2）采用b=[...a]或b=a.slice()的方式进行深克隆
        3）splice()方法删除元素，第一个参数索引值，第二个参数删除的个数，第三个参数新增项
        4）条件渲染 {this.state.list.length==0?<div>暂无待办事项</div>:null}，可使用三目运算符
                或者使用&&运算符，前面为真则执行后面的，否则不执行
        5）条件渲染是动态创建标签的，如果想原来就有，则需要引入css文件，通过设置className的值来动态显示

import React, { PureComponent } from 'react'
import './css/01-index.css'

export default class App extends PureComponent {
    myref = React.createRef();
//    state={
//        list:["aa","bb","cc"]
//    }//这种写法无法读取重复元素，写成id索引即可
state={
    list:[{
        id:1,
        text:"1111"
    },
    {
        id:2,
        text:"2222"
    },
    {
        id:3,
        text:"3333"
    }]
}
    render() {
        return (
            <div>
                <input ref={this.myref}></input>
                <button onClick={()=>{
                    //不要直接修改状态，可能会造成不可预期的问题
                    //this.state.list.push(this.myref.current.value);
                    //let newlist = this.state.list;
                    //newlist.push(this.myref.current.value);
                    //js中的赋值为浅克隆，还是会影响引用对象的原始数据
                   let newlist = [...this.state.list];
                   newlist.push({
                       id:Math.random()*1000000,
                       text:this.myref.current.value
                   })
                    this.setState({
                        list:newlist
                    });
                }}>add1</button>
                <ul>
                    {
                        this.state.list.map((item,index)=>
                            <div style={{display:'flex'}} key={item.id}>
                                <li >{item.text}</li>
                                <button onClick={()=>{
                                    this.deltext(index);
                                }}>删除</button>
                            </div>

                        )
                    }
                </ul>
                {this.state.list.length==0?<div>暂无待办事项</div>:null}
                {this.state.list.length==0 && <div>暂无待办事项</div>}
                <div className={this.state.list.length==0?'':'hidden'}>暂无待办事项</div>
            </div>
        )
    }
   deltext =(index)=>{
        //var newlist = [...this.state.list]
        //console.log(textid)
        //return newlist;
        let newlist = this.state.list.slice();
        newlist.splice(index,1)
        this.setState({
            list:newlist
        })
   }
}