react实现点击循环数据中的button，弹出弹窗或者产生新的数据

忘是亡心i 2023-06-30 11:54 27阅读 0赞

在最近的一次项目中，根据项目需求，需要做一个如下的需求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70]  
点击+button，产生一个新的链接输入框  
思路解析：  
根据数据循环产生多少个button，我们需要循环生成多少个容器，然后将所有生成的容器放到一个公共的数据容器里面，让后面能够使用数据的时候给方便  
在state中定义一个公共的数据容器：

this.state={
    	addLinks:[],
    	addLink:0 //初始化点击数据
    }

在页面初次渲染完后进行生成点击button容器

this.state.test.forEach((item,index)=>{
    	this.state.addLinks.push([])
    })

点击button事件：

e:表示当前点击button
    index：表示当前点击的butotn的index/是哪个button
    addLink(e,index){
    	this.setState({
    		addLink:this.state.addLinks + 1
    	})
    	// 给点击的button中做一个对象存储器，用于存储链接输入框的数据
    	this.state.addLinks[index].push({
    		value:''
    	})
    }

渲染新的链接数据框

this.state.Links[index] !== undefined &&
       this.state.Links[index].length > 0 ?
        this.state.Links[index].map((item,_index)=>{
            return(
                <Row gutter={24} key={_index}>
                    <Col span={13}>
                    <span style={
       { marginLeft: 5 }}>链接:</span> <Input
                            style={
       { width: 400 }}
                            value={item.value}
                            type="text"
                            onChange={e => {
                                this.addLinkChange(e,index,_index)
                            }}
                        />
                    </Col>
                </Row>
            )
        }):''

输入框输入数据

addLinkChange(e,index,_index){
    	var prevState = this.state.Links
        var val = e.target.value
         this.setState(()=>{
             let temp=[
                 ...prevState
             ]
             temp[index][_index].value = val
         })
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200117143453571.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3NzA3NA==,size_16,color_FFFFFF,t_70