react-select：有没有办法至少在异步模式下删除右侧展开列表的按钮？

Question

我正在使用 AsyncSelect，我想隐藏右侧的向下箭头按钮，即显示选项列表的按钮。

有默认选项时才有意义。但我的情况是 none，所以那个按钮对我的情况毫无意义。

在 async 模式下没有默认选项时，有没有办法 remove/hide 它？

下面是代码

<AsyncSelect
  placeholder="Search ..."
  cacheOptions
  defaultOptions={false}
  value={this.state.currentValue} // Default to null
  loadOptions={this.fetchOptions}
  onChange={...}
  isClearable
/>

另外，是否可以禁止组件在获得焦点时显示空列表，并且只在输入至少一个字符时才显示匹配的选项。

很抱歉要求二合一。

提前致谢。

Answer 1

编辑：这是旧版本。

样式化 react-select 是可行的，但您需要跳过几个环节。

您有一些自动生成的元素可以定位到样式 - https://react-select.com/styles#style-object

要找到您要定位的元素的样式键是什么，请查看此 - https://github.com/JedWatson/react-select/issues/3135#issuecomment-432557568

^ 您需要在组件中添加一个 className 和 classNamePrefix 才能看到它实际上是什么。他们的文档可以做一些工作，但我在 repo 上看到大量积压的问题和 PR，所以我认为这很快就会发生的可能性很小。

然后您可以按照所述设置该键的样式 - https://react-select.com/styles#provided-styles-and-state

Answer 2

我们可以通过在组件属性中包含 DropdownIndicator: () => null 来删除下拉指示器。

更新：@shlgug 和@nickornotto 建议通过包含 IndicatorSeparator:() => null

来删除分隔符

<Select
   components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
 />

Answer 3

要扩展 rajesh kumar 的回答，您可以使用以下方法删除下拉指示器和指示器分隔符（选择文本和下拉箭头之间的水平线）：

<Select
    components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
/>

Answer 4

使用样式={customStyles}，其中：

// Here are right side idicators X and \/ . We can use each one separate or the hole Indicator Container!
    // clearIndicator: (prevStyle, state) => state.isMulti ? ({
    //     ...prevStyle,
    //     display: 'none'
    // }) : null,
    // dropdownIndicator: (prevStyle, state) => state.isMulti ? ({
    //     ...prevStyle,
    //     display: 'none'
    // }) : null,
    indicatorsContainer: (prevStyle, state) => state.isMulti ? ({
        ...prevStyle,
        display: 'none'
    }) : null,
}

额外检查 state.isMulti 是否将它们设置为 none。如果不需要额外检查，只需删除三元运算符 state.isMulti 和 : null

react-select：有没有办法至少在异步模式下删除右侧展开列表的按钮？

react-select: Is there a way to remove the button on the right that expand the list, at least in async mode?

javascript

reactjs

react-select