在 React-select v2 中旋转箭头指示器 [英] Rotate arrow indicator in React-select v2

问题描述

我在我的带有样式组件的项目中使用 React Select v2，我需要能够在菜单打开时将箭头指示器倒置，这在 v1 中受支持.

I'm using React Select v2 in my project with Styled Components and I need to be able to turn the arrow indicator upside down when the menu is open, which was supported in v1.

通过这样做，我有点设法做到了:

I kinda managed to do it by doing this:

   css`
     &.react-select__control--is-focused {
       & .react-select__indicators {
         & .react-select__dropdown-indicator {
           transform: rotate(180deg);
         }
       }
     }
   `;

问题是，如果我按下箭头打开菜单并再次单击它关闭它，箭头保持倒置，因为选择仍然是焦点，这在 UIX 方面感觉有点奇怪.

Problem is that, if I press the arrow to open the menu and click on it again to close it, the arrow stays upside down because the select is still focused, which feels a bit weird in terms of UIX.

是否有根据菜单状态旋转它的正确方法?我在文档中查找了一些内容，但找不到.

Is there a proper way to rotate it based on the state of the menu? I looked for something in the documentation but I couldn't find it.

也许我错过了，如果有人能指出我正确的方向，那就太棒了！

Maybe I missed it, if someone could point me in the right direction, that'd be awesome!

谢谢！

推荐答案

所以，根据 Laura 的回应，我的解决方案是使用 onMenuClose 和 onMenuOpen 来设置我的样式组件中的属性状态.

So, based on Laura's response, my solution was to use the onMenuClose and onMenuOpen to set the state of a property in my styled component.

const indicatorStyle = (props: StyledSelectProps & DropdownProps<{}>) => css`
  & .react-select__indicators {
      & .react-select__dropdown-indicator {
        transition: all .2s ease;
        transform: ${props.isOpen && "rotate(180deg)"};
      }
    }
`;

这个函数在我的样式组件的 css 中调用.

This function is called inside of my styled component's css.

然后在我调用样式化组件的组件中，我控制状态:

And then in the component I call my styled component, I control the state:

export class Dropdown<TValue> extends React.Component<DropdownProps<TValue>> {
  public state = { isOpen: false };

  private onMenuOpen = () => this.setState({ isOpen: true });
  private onMenuClose = () => this.setState({ isOpen: false });

  public render() {
    const { ...props } = this.props;
    const { isOpen } = this.state;
    return (
      <StyledSelect {...props} isOpen={isOpen} onMenuOpen={this.onMenuOpen} onMenuClose={this.onMenuClose} />
    );
  }
}

有点复杂，但现在可以使用.

A bit convoluted but it works for now.

这篇关于在 React-select v2 中旋转箭头指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！