React Select自定义组件中如何修改menuIsOpen属性？

1. 手动维护菜单状态 + 彻底阻止事件冒泡 #

你已经使用了e.stopPropagation()和e.preventDefault()，但由于menuIsOpen是受控状态，需要在点击按钮时主动将其设为true，抵消可能触发的关闭逻辑：

修改handleAddNew函数：

const handleAddNew = async (e: React.MouseEvent<HTMLElement>) => {
  e.stopPropagation();
  e.preventDefault();
  // 主动保持菜单打开状态
  setOpen(true);
  setShowInputField(true);
};

同时确保自定义MenuList组件中，按钮的点击事件直接绑定该处理函数，避免额外的事件冒泡层级：

const MenuList = (props) => {
  return (
    <div {...props.innerProps}>
      {props.children}
      <button onClick={handleAddNew}>添加新选项</button>
    </div>
  );
};

2. 使用onBeforeMenuClose回调阻止不必要的关闭 #

React Select提供了onBeforeMenuClose回调，可在菜单即将关闭时判断是否需要阻止：

给Select组件添加该回调：

<Select
  className="sui-w-64"
  options={options}
  aria-label="input-abc"
  name="input-abc"
  components={{ MenuList }}
  isMulti
  menuIsOpen={open}
  onMenuOpen={() => setOpen(true)}
  onMenuClose={() => setOpen(false)}
  closeMenuOnSelect={false}
  hideSelectedOptions={false}
  // 新增回调判断是否允许关闭菜单
  onBeforeMenuClose={() => {
    // 若输入框已显示，则阻止菜单关闭
    return !showInputField;
  }}
/>

此时handleAddNew只需负责显示输入框：

const handleAddNew = async (e: React.MouseEvent<HTMLElement>) => {
  e.stopPropagation();
  e.preventDefault();
  setShowInputField(true);
};

3. 确保自定义MenuList正确继承默认属性 #

自定义MenuList时要正确传递innerProps，避免覆盖菜单的默认事件处理逻辑：

const CustomMenuList = (props) => {
  return (
    <div {...props.innerProps}>
      {props.children}
      <button onClick={handleAddNew}>添加新选项</button>
    </div>
  );
};

这样既保留菜单的默认交互，又能让按钮的点击事件正确阻止冒泡。

内容的提问来源于stack exchange，提问作者Sandy