巧用ant-design menu解决类似穿梭框并解决单击双击事件分离问题

需求如上，单击左侧任意字段，调用端口获取右侧字段列表，双击将左侧字段输入到文本框内可与右侧字段拼接成语句，刚开始想用transfer穿梭框，但是发现不是很贴合需求，并且想用menu的样式，毕竟改样式实在是不想改，哈哈，但是写好了又会发现，双击字段是拿出来了，但是请求了两次端口，无形会增加无用的请求次数造成浪费，查过有说用计时器，即类似于防抖函数，但是感觉并不是很适合这个需求，在翻看官方解读是看到，onSelect被选中时调用,onClick点击 MenuItem 调用此函数,这就意味着onClick和onSelect并不是同时触发，这样就可以实现类似穿梭框，但是又不会双击的时候触发两次单击事件了，上代码

<Menu
    defaultSelectedKeys={['']}
    //onSelect写在Menu标签内
    onSelect = {(e) => this.getData()}
>
    <Menu.Item
        //此时双击并不会触发getdata
        onDoubleClick={(e) => this.selectWord()}
        key={index}
    ></Menu.Item>
</Menu>

完美解决了需求，两全其美，亲测可用。