鼠标移出事件 react antd popover

Question

onVisibleChangeABox =(visible, item,classId,x,y,z)=> {
        this.setState({ 
            [`visible${x+y+z}`]: false,
        }); 
        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,
                })
            }
        })
    }
onMLpopover =(x,y,z)=> { // 单格鼠标离开事件隐藏气泡
     this.setState({ 
         [`visible${x+y+z}`]: false,
     });
 }


<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++){
                let y = j
                let x = shelfName
                let z = shelfId
                ...
                const ABoxContent = ( <div onMouseOut={()=>this.onMLpopover(x,y,z)}>...</div> ) // 弹窗里的内容 省略
                ColumnsList.push(
                // 重点~~~~~
                <div className="aBox" key={'li_'+this.state.reactid++} style={{backgroundColor:shelfClassList[j].ButtonColor,}} onMouseOut={()=>this.onMLpopover(x,y,z)}> // 添加了鼠标移出事件
                  <Popover placement="right" content={ABoxContent} key={'li_'+this.state.reactid++} onVisibleChange={(visible)=>this.onVisibleChangeABox(visible, item,classId,x,y,z)} trigger="hover" `visible={this.state[`visible${x+y+z}`]}`>
                      <div className="aBox" key={'li_'+this.state.reactid++}>
                        {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 className="InputBorderState" 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.onclick(e,item,shelfId,shelfClassList)}> 
                  {str}
              </div>
            </div>
      )
    })}
</div>

鼠标明明移出了 气泡还显示 也设置了onMouseOut事件咋不好使(⊙ˍ⊙)？
鼠标快速划过 会出现同时显示两个气泡的情况(⊙o⊙)？