SUSUSSL 2020-05-06 14:14 采纳率: 0%
浏览 1855

react antd Popover 气泡卡片悬停触发接口问题

1.Popover组件怎么用 使用组件的同时(悬停触发) 又触发接口 获取后台数据 展现在气泡卡片上 (只显示唯一的气泡卡片,目前代码会出现一组气泡卡片 试了很多乱七八糟的办法 不会用 求救)

onVisibleChangeABox =(visible,classId,visible1,item,)=> {
        // console.log(item)
        item.visible = true // !
        // item.shelfClassList.visible = true
        console.log(visible,classId,item)
        console.log(item.shelfClassList)
        this.state.BtnList.visible = true
        setTimeout(()=>{
            this.setState({
                visible2: visible,
            });
            // visible = true
            const RData = {
                "classId":classId,
                "shopId": this.props.location.state.shopId,
            }
            CDetails(JSON.stringify(RData)).then(({data})=>{
                if(data.code === 100){
                    data.data[0].visible = true
                    console.log(data.data)
                    console.log(data.data[0].visible)
                    this.setState({
                        BtnList : data.data,
                        AgoodRetailPrice : data.data[0].goodPicture,
                    })
                    console.log(this.state.BtnList[0].visible)
                }
            })
        },0)
    }



<div className="scrollBar" style={{overflowY:"scroll",height:"800px"}}>
    {Array.from(dataList).map((item,index)=>{
        const xxx = item.xxx
        ...
        shelfClassList.map((item,index)=>{
            ...
        })
        const str = []
        let ColumnsList = []
        for(let i =0;i<shelfRows;i++){
            let j = i*shelfColumns
            let flag = (i+1)*shelfColumns
            for(;j<flag;j++){
                const classRow = shelfClassList[j].classRow
                const classId = shelfClassList[j].classId
                let visible1 = shelfClassList[j].visible
                ...
                const ABoxContent = ( <div>...</div> ) // 弹窗里的内容 省略
                ColumnsList.push(
                // 重点~~~~~
                    <Popover placement="right" content={ABoxContent} key={'li_'+this.state.reactid++} onVisibleChange={(visible)=>this.onVisibleChangeABox(visible,classId,visible1,item,)} trigger="hover" visible={item.visible}>
                        <div className="aBox" key={'li_'+this.state.reactid++} style={{backgroundColor:shelfClassList[j].ButtonColor,}} >
                        {shelfClassList[j].classRow} - {shelfClassList[j].classColumn}
                        </div>
                    </Popover>
                 //
                )
            }
            str.push(<div key={item.shelfName+i} style={{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"50px"}}>
                {ColumnsList}
            </div>) 
        }
return (
          <div className="oneBox" key={item.shelfId}>
             <div className="oneBoxTitle">
                 嗷嗷 : <Input defaultValue={item.shelfName} size="small" onChange={this.onchangeShelfName} onFocus={this.onfocusShelf} onBlur={()=>this.onchangeShelfNameOut(shelfId)} suffix={<Tooltip title="可编辑"> <Icon type="edit" /> </Tooltip>}/> 
             </div>
             <div onClick={(e)=>this.onclickBigContainer(e,item,shelfId,shelfClassList)}> 
                  {str}
              </div>
            </div>
      )
    })}
</div>
  • 写回答

1条回答 默认 最新

  • zqbnqsdsmd 2020-05-06 14:15
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀