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

IT技术 javascript reactjs react-select
2021-05-14 14:26:54

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

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

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

下面是代码

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

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

抱歉问二合一。

提前致谢。

4个回答

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

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

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

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

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

编辑:这是旧版本。

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

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

为了找到你想要定位的元素的样式键是什么,看看这个 - https://github.com/JedWatson/react-select/issues/3135#issuecomment-432557568

^ 您需要在 Component 中添加一个classNameandclassNamePrefix以查看它实际是什么。他们的文档可以做一些工作,但我看到回购中有大量积压的问题和 PR,所以我认为这很快就会发生的可能性很小。

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

使用styles={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 的额外检查将它们设置为无或不。如果您不需要额外的检查,只需删除三元运算符 state.isMulti 和 : null