标题

import React, { Component } from 'react'

export default class App extends Component {

    state = {
        datalist:["aaa","bbb","ccc","ddddd"]
    }

    mytext = React.createRef() 

    render() {
        // console.log(this)
        return (
            <div>
                <input type="text" ref={this.mytext} />
                <button onClick={
                    this.handleClickAdd.bind(this)
                }>add2</button>
                    
                <ul>
                    {
                        this.state.datalist.map((item,index)=>
                        <li key={item}>
                            {item}
                            <button onClick={()=>this.handleDel(index)}>del1</button>
                            <button onClick={this.handleDel.bind(this,index)}>del2</button>
                        </li>
                        )
                    }
                </ul>
            </div>
        )
    }

    handleClickAdd() {
        console.log("click", this.mytext.current.value)

        // this.state.datalist.push(this.mytext.current.value)
        // this.forceUpdate()

        this.setState({
            datalist:[...this.state.datalist,this.mytext.current.value]
        })

        this.mytext.current.value = "" //ref 引用清空 
    }

    handleDel(index){

        // this.state.datalist.splice
        console.log("del",index)

        // this.state.datalist.splice(index,1)
        var newlist = [...this.state.datalist]
        newlist.splice(index,1)
        this.setState({
            datalist:newlist
        })
    }

}

var list= ["aaa","bbb","ccc"]

var newlist = list.map(item=>`<li>${item}</li>`)

console.log(newlist.join(""))

//r-if?----------
//r-show?---------