reactjs - 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 state 没有绑定(bind) isMenuOpen状态但与真实的 focus容器的状态。

一个解决方案是设置 closeMenuOnSelect={false}因此用户必须在选择之外单击，您的箭头将向后翻转。

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

更新

您可以直接访问 menuOpen Prop 通过 state所以不需要像下面这样手动添加类:

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

请注意

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