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

Question

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

我有点设法通过这样做来做到这一点：

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

问题是，如果我按下箭头打开菜单并再次单击它关闭它，箭头保持倒置，因为选择仍然是焦点，这在 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}以便用户必须在选择之外单击并且您的箭​​头将向后翻转。

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

更新

您可以menuOpen通过直接访问道具，state因此无需手动添加类，如下所示：

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

请注意

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

Answer 2

这对我有用

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