标签：index item todolist newlist mytext datalist state

标题

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?---------

标签：index,item,todolist,newlist,mytext,datalist,state
来源： https://blog.csdn.net/great_t/article/details/117023669

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。