react-select点击清除按钮移除选项后，如何同时取消选中选择框？

要解决react-select中点击清除按钮后仅移除选项但菜单仍保持展开的问题，可以通过以下两种方式实现清除选项的同时关闭菜单：

方法一：手动控制菜单展开状态 #

通过React状态管理menuIsOpen，在清除选项时强制关闭菜单：

import React, { useState } from "react";
import Select from "react-select";

const options = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "cherry", label: "Cherry" }
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState(null);
  const [menuIsOpen, setMenuIsOpen] = useState(false);

  const handleChange = (option) => {
    setSelectedOption(option);
    // 清除选项时关闭菜单
    if (!option) {
      setMenuIsOpen(false);
    }
  };

  return (
    <div className="App">
      <Select
        options={options}
        value={selectedOption}
        onChange={handleChange}
        isClearable={true}
        menuIsOpen={menuIsOpen}
        onMenuOpen={() => setMenuIsOpen(true)}
        onMenuClose={() => setMenuIsOpen(false)}
      />
    </div>
  );
}

原理 #

通过menuIsOpen状态绑定Select组件的菜单展开状态，在handleChange回调中判断当选项被清除（option为null）时，主动将menuIsOpen设为false，从而同步关闭菜单。

方法二：通过Ref让选择框失焦 #

利用React Ref获取Select组件实例，清除选项时调用blur()方法让选择框失焦，自动关闭菜单：

import React, { useState, useRef } from "react";
import Select from "react-select";

const options = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "cherry", label: "Cherry" }
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState(null);
  const selectRef = useRef(null);

  const handleChange = (option) => {
    setSelectedOption(option);
    if (!option) {
      // 失焦关闭菜单
      selectRef.current.blur();
    }
  };

  return (
    <div className="App">
      <Select
        ref={selectRef}
        options={options}
        value={selectedOption}
        onChange={handleChange}
        isClearable={true}
      />
    </div>
  );
}

原理 #

react-select的菜单展开状态与选择框的焦点状态关联，当选择框失焦时，菜单会自动关闭。通过Ref调用blur()方法，在清除选项时主动让选择框失去焦点，达到同时关闭菜单的效果。

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