react添加、删除一行dom节点

最新推荐文章于 2024-05-22 21:57:05 发布

原创最新推荐文章于 2024-05-22 21:57:05 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react #dom #js

react 专栏收录该内容

5 篇文章

订阅专栏

这篇博客探讨了在React中如何管理state数据，并在render方法中动态创建和移除DOM元素，实现行的增删功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

render里面的布局

{
    this.state.externalContact.map((item,i)=>{
    //console.log("i==="+i+"item"+item)
    return(
           <Row className="gutter-row" key={i}>
                <Col span={20} offset={4} className="gutter-col">
                     <div>
                          <Row>
                               <Col span={5}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'name')}/></Col>
                               <Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'phone')}/></Col>
                               <Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'QQ')}/></Col>
                               <Col span={5} offset={1}><Input type="text" onChange={e => this.changeExternalContactValue(i,e.target.value,'email')}/></Col>
                               <Col span={1}><div style={{width:'100%',height:'32px',lineHeight:'32px',textAlign:'center'}} onClick={()=>this.delExternalContact(i)}><DeleteFilled /></div></Col>
                          </Row>
                    </div>
              </Col>
        </Row>
       )
    })
}
<Row>
     <Col offset={4} className="gutter-col"><div style={{cursor:'pointer'}} onClick={this.addExternalContact}><PlusOutlined/><span>增加对外联系人</span></div></Col>
</Row>

state里的数据

this.state={
	externalContact:[],//对外联系人
	listA:[],
}

方法

//添加对外联系人
    addExternalContact = ()=>{
        this.state.listA.push({name:'', phone:'', QQ:'', email:''})
        this.setState({
            externalContact:this.state.listA
        })
    }
    //改变对外联系人值
    changeExternalContactValue(i,value,inputName){
        //console.log(i,inputName)
        this.state.listA[i][inputName] = value
        this.setState({
            externalContact:this.state.listA
        },()=>{console.log(this.state.externalContact)})
    }
    //删除联系人
    delExternalContact(index){
        let lists = this.state.externalContact;
        lists.splice(index,1);
        this.setState({externalContact:lists},()=>{console.log(this.state.externalContact)})
    }