扣除菜单是否在react-select DropdownIndicator处理程序中打开

Question

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

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