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

Question

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

我通过这样做设法做到了：

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

问题是，如果我按下箭头打开菜单并再次单击它关闭它，箭头保持倒置，因为 select 仍然是焦点，这在术语上感觉有点奇怪UIX 的。

有没有根据菜单状态旋转的合适方法？我在文档中查找了一些内容，但找不到。

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

谢谢！

Answer 1

从技术上讲，您可以使用 v2 的 style-in-JS 道具。像下面的例子：

dropdownIndicator: (base, state) => ({
    ...base,
    transition: 'all .2s ease',
    transform: state.isFocused ? 'rotate(180deg)' : null
  })

似乎 isFocused 状态未与 isMenuOpen 状态绑定，而是与容器的真实 focus 状态绑定。

一个解决方案是设置 closeMenuOnSelect={false}，这样用户必须在 select 之外单击，然后您的箭头会向后翻转。

或者您可以使用 onMenuOpen 和 onMenuClose 更改 className 道具，方法是添加一个特定的后缀来定位您的动画。

更新

您可以通过 state 直接访问 menuOpen 道具，因此无需像下面这样手动添加 class：

dropdownIndicator: (base, state) => ({
  ...base,
  transition: 'all .2s ease',
  transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : null
})

请注意

在react-selectv2.3中直接在代码中添加了control--menu-is-open

Answer 2

因此，根据 Laura 的回复，我的解决方案是使用 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} />
    );
  }
}

有点复杂，但现在可以用了。

Answer 3

这对我有用

<select styles={{
            dropdownIndicator: (provided, state) => ({
              ...provided,
              transform: state.selectProps.menuIsOpen && "rotate(180deg)"
            })
          }}
/>

Answer 4

这对我有用。

  dropdownIndicator: (base, state) => ({
    ...base,
    transform: state.selectProps.menuIsOpen ? 'rotate(-90deg)' : 'rotate(0)',
    transition: '250ms',
  }),

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

Rotate arrow indicator in React-select v2

reactjs

react-select