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的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-select v2.3中，control--menu-is-open已直接添加到代码中。

Answer 2

因此，根据劳拉的回答，我的解决方案是使用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)"
            })
          }}
/>

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

3 个答案: