react antd Popover气泡卡片

Question

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>

Answer 1

我这样写即可以触发相应的事件，也能控制气泡卡片展示这样的写法应该是没问题的，有没有可能和你popOver的visible取的item.visible有关

handleVisibleChange = (visible, item) => {
    console.log(item, 'item in handleVisibleChange');
    this.setState({ [`visible${item}`]: visible });
  };

  render() {
    return [1, 23, 4, 5].map(item => (
      <Popover
        key={item}
        title="Title"
        trigger="click"
        visible={this.state[`visible${item}`]}
        onVisibleChange={visible => this.handleVisibleChange(visible, item)}
      >
        <Button type="primary" style={{ marginBottom: 20 }}>
          Click me {item}
        </Button>
        <br />
      </Popover>
    ));
  }

Answer 2

代码排版也太乱了吧，看的头昏。

应该是循环写错了。