antd 有多个input输入框，在每个input内右键鼠标，弹出200xp的菜单栏，在input外右键不显示菜单

要在多个Ant Design的Input输入框中实现右键鼠标弹出200px的菜单栏，并在输入框外部右键不显示菜单，您可以按照以下步骤进行操作：

1. 首先，您需要使用Ant Design的`ContextMenu`组件来创建菜单栏。您可以通过安装`@ant-design/context-menu`依赖来获取该组件。

2. 在您的代码中导入所需的组件：

import { ContextMenu, MenuItem } from '@ant-design/context-menu';

3. 在每个Input组件内部创建ContextMenu组件，并设置触发右键事件的条件：

{inputs.map((input, index) => (
  <ContextMenu
    key={index}
    className="input-context-menu"
    overlay={menu}
    hidden={selectedInput !== index}
  >
    <Input
      onContextMenu={(e) => handleContextMenu(e, index)}
    />
  </ContextMenu>
))}

这里的`inputs`是一个存储输入框数据的数组，`selectedInput`是一个状态变量，用于记录当前被选中的输入框索引。

4. 实现右键事件处理函数`handleContextMenu`，根据鼠标点击位置判断是否在对应的输入框内部，并更新`selectedInput`状态变量：

const handleContextMenu = (e, index) => {
  e.preventDefault();
  const input = e.target;
  const { clientX, clientY } = e;

  const rect = input.getBoundingClientRect();

  if (
    clientX >= rect.left &&
    clientX <= rect.right &&
    clientY >= rect.top &&
    clientY <= rect.bottom
  ) {
    setSelectedInput(index);
  } else {
    setSelectedInput(-1);
  }
};

5. 最后，在组件的样式表中定义`.input-context-menu`类，设置菜单栏的样式：

.input-context-menu {
  position: absolute;
  left: 0;
  top: 0;
}

这样，您就可以在多个Ant Design的Input输入框中实现右键鼠标弹出200px的菜单栏，同时在输入框外部右键不显示菜单的效果了。希望对您有所帮助！