如果在 react-select DropdownIndicator 处理程序中打开菜单，则扣除

Question

我需要更改 react-select 中箭头的样式。我了解到可以通过使用下面代码示例中的 components 道具来完成。

但是DropdownIndicator出现的道具似乎没有提供菜单打开时的任何信息。我需要使用该信息来根据菜单是打开还是关闭来更改箭头样式。

我如何获得该信息？

import ReactSelect, { components } from 'react-select';

...

const DropdownIndicator = (props) => {  
  const { isFocused } = props;
  
  // Which prop tells if the menu is open? Certainly isFocused is not the correct one.
  const caretClass = isFocused ? 'caret-up' : 'caret-down';

  return (
    <components.DropdownIndicator {...props}>
      <div className={`${caretClass}`} />
    </components.DropdownIndicator>
  );
};

return (<ReactSelect
 components={{ DropdownIndicator }}
 placeholder={placeholder}
 value={value}
 onBlur={onBlur}
 name={name}
 ...
/>)

Answer 1

我认为 react-select 正在传递自定义组件中的所有 selectProps。在 selectProps 中有一个名为 menuIsOpen 的字段，用于确定下拉列表是否打开。

因此您可以通过以下方式访问 menuIsOpen：-

const DropdownIndicator = (props) => {  
  const { menuIsOpen } = props.selectProps;
  
  // menuIsOpen will tell if dropdown is open or not
  const caretClass = menuIsOpen ? 'caret-up' : 'caret-down';

  return (
    <components.DropdownIndicator {...props}>
      <div className={`${caretClass}`} />
    </components.DropdownIndicator>
  );
};

如果在 react-select DropdownIndicator 处理程序中打开菜单，则扣除

Deduct if the menu is open in react-select DropdownIndicator handler

javascript

react-select