在React-select v2中旋转箭头指示器

  • Z时代
  • 2024-01-10
  • 分类：问答

我在我的项目中使用带有样式化组件的React Select v2，并且当菜单打开时，我需要能够将箭头指示器上下颠倒，这在v1中受支持。

我设法做到这一点：

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

问题是，如果我按箭头打开菜单并再次单击以将其关闭，则箭头将保持上下颠倒，因为选择仍处于焦点状态，这在UIX方面感觉有些奇怪。

是否有根据菜单状态旋转它的正确方法？我在文档中寻找了一些东西，但是找不到。

也许我想念它，如果有人可以指出正确的方向，那就太好了！

谢谢！

回答：

因此，根据劳拉的回答，我的解决方案是使用onMenuClose和onMenuOpen设置样式化组件中属性的状态。

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

此函数在样式化组件的css内部调用。

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

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

有点令人费解，但现在可以使用。

以上是 在React-select v2中旋转箭头指示器 的全部内容， 来源链接： utcz.com/qa/403555.html

回到顶部