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

Question

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

但是，如果菜单打开，DropdownIndicator 的 Prop 似乎不会提供任何信息。我需要使用该信息来根据菜单是打开还是关闭来更改箭头样式。

我怎样才能得到这些信息？

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>
  );
};