条件渲染

书接上回  https://www.cnblogs.com/kaibindirver/p/17381857.html

import React from 'react'
import '../css/01.css'

export default class App extends React.Component {

    myref = React.createRef()

    state = {
        list: [{"id":0,"name":"李四"},{"id":1,"name":"张三"}]
    }

    render() {
        return (

            <div>
                {/* 获取输入框的内容 写法二 */}
                <input ref={this.myref}></input>
                <button onClick={this.handleClick2}>获取输入框的值</button>
                <ul>
                    {this.state.list.map(item => 
                    
                    <li key={item.id}>
                        <span dangerouslySetInnerHTML={{
                            __html:item.name
                        }}
                        ></span>
                       
                        {/* {item.name} */}
                        {/* 第二种写法 */}
                        <button onClick={()=>this.handleDelClick(item.id)}>del</button>
                        </li>)}
                </ul>


                {/* 方法一 */}
                {this.state.list.length===0 ? <div>暂无代办事项2</div>:null}
                {/* 方法二   && 意思是前面条件为真执行后面的*/}
                {this.state.list.length===0 && <div>暂无代办事项1</div>}
                {/* 方法三 通过样式隐藏 */  }
                {console.log(1111,this.state.list.length)}
                <div className={this.state.list.length===0?'':'hidden'}>暂无代办事项3</div>

            </div>
        )
    }

    handleClick2 = () => {
        // 追加数据---但是不建议这么直接操作修改
        // this.state.list.push(this.myref.current.value)

        // 要深拷贝再负值
        let newlist =[...this.state.list]
        newlist.push(
            {
                "id":Math.random()*1000000,
                "name":this.myref.current.value
            }
            )

        //通知dom 更新数据
        this.setState({
            list:newlist
        }
        )
         //清空输入框的信息
         this.myref.current.value='' 
    }

    handleDelClick(id){
        console.log("del-click",id)

        // 深拷贝
        let newlist =[...this.state.list]
        //删除传过来的下标数据
        newlist.splice(id,1)

         //通知dom 更新数据
         this.setState({
            list:newlist
        })
       
    }
}

 

01.css

.hidden{
    display: none;

}