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

acm*_*une 33 javascript reactjs react-select

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

有默认选项时才有意义。但就我而言,我没有,所以那个按钮在我的情况下没有意义。

async模式下并且没有默认选项时,有没有办法删除/隐藏它?

下面是代码

<AsyncSelect
  placeholder="Search ..."
  cacheOptions
  defaultOptions={false}
  value={this.state.currentValue} // Default to null
  loadOptions={this.fetchOptions}
  onChange={...}
  isClearable
/>
Run Code Online (Sandbox Code Playgroud)

此外,是否可以禁用组件在获得焦点时显示空列表的事实,并且仅在输入至少一个字符时才显示匹配的选项。

抱歉问二合一。

提前致谢。

raj*_*mar 54

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

更新:正如@shlgug 和@nickornotto 建议通过包括删除分隔符 IndicatorSeparator:() => null

<Select
   components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
 />
Run Code Online (Sandbox Code Playgroud)

  • 我必须使用 `DropdownIndicator:() =&gt; null, IndicatorSeparator: () =&gt; null` 因为即使删除了下拉指示器,它也会留下分隔符 (7认同)

shl*_*gug 36

要扩展 rajesh kumar 的答案,您可以使用以下命令删除下拉指示符和指示符分隔符(选择文本和下拉箭头之间的水平线):

<Select
    components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
/>
Run Code Online (Sandbox Code Playgroud)