实现Dropdown下拉菜单监听键盘上下键选中功能-React

用过ant design的小伙伴都知道，select组件是支持联想搜索跟上下键选中的效果的，但是在项目中我们可能会遇到用select组件无法实现我们的需求的情况，比如说一个div框，里面有input，又有tag标签，在input中输入内容触发联想，然后选中其中某一个，以tag标签的形式回填到div框中（类似这种需求）。这个时候，我们可以采用ant design的dropdown组件来帮助我们实现。

getBoundingClientRect()方法可以获取元素的大小及其相对视口的位置，这样可以帮助对元素是否在可视区域内进行判断

getBoundingClientRect() 是一个在 DOM（文档对象模型）中常用的方法，它返回一个 DOMRect 对象，
该对象提供了元素的大小及其相对于视口的位置。这个方法非常有用，
特别是在需要知道元素在页面上的确切位置或尺寸时。

DOMRect 对象包含以下属性：

x：元素左上角相对于视口（viewport）的 x 坐标（包括任何滚动偏移）。
y：元素左上角相对于视口（viewport）的 y 坐标（包括任何滚动偏移）。
width：元素的宽度（包括内边距 padding，但不包括边框 border、外边距 margin 和滚动条）。
height：元素的高度（包括内边距 padding，但不包括边框 border、外边距 margin 和滚动条）。
top：元素顶部边缘相对于视口（viewport）的 y 坐标（包括任何滚动偏移）。
right：元素右边缘相对于视口（viewport）的 x 坐标（包括任何滚动偏移）。
bottom：元素底部边缘相对于视口（viewport）的 y 坐标（包括任何滚动偏移）。
left：元素左边边缘相对于视口（viewport）的 x 坐标（包括任何滚动偏移）。

页面布局代码 ，需要根据实际情况来进行调整

compone