我需要更改 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}
...
/>)
最佳答案
我认为 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>
);
};
关于javascript - 如果菜单在 react-select DropdownIndicator 处理程序中打开,则扣除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67412234/