标签: react-select-search

我正在使用反应选择，但我无法从下拉列表中删除旋转器/箭头。

我可以删除默认分隔符 | 和下拉指示器使用

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

但我怎样才能摆脱这些箭头呢？

有没有办法即使在搜索其他内容后也始终在菜单上显示所选选项

这是我使用的代码

import React from "react";
import Select from "react-select/async";
const CheckboxDropdown = ({
  options,
  defaultValue,
  loadOptions,
  handleCheckboxSelect,
}) => {
  const selectDefaultValue = defaultValue;
  
  return (
    <div className="flex">
      <Select
        defaultMenuIsOpen
        defaultOptions={options}
        cacheOptions
        loadOptions={loadOptions}
        options={options}
        defaultValue={defaultValue}
        isMulti
        onChange={handleCheckboxSelect}
        noOptionsMessage={() => "No options available"}
        className="w-full"
        isClearable={false}
        placeholder="Type site name..."
      />
    </div>
  );
};
export default CheckboxDropdown;

我有产品数据，我正在使用搜索值过滤数据，然后使用过滤后的数据呈现选项。产品数据来自全球 redux 商店作为道具。出于某种原因，下拉列表仅在搜索值为空时显示数据，当我开始输入时，filteredData更新并重新呈现组件，但选项不显示数据。

我已经检查了是否使用权限filteredData来映射选项。即使重新渲染组件，这些选项似乎也不会渲染。

请看下面的代码：

import React from 'react';
// import {useState} from 'react';
import {Select} from 'antd';
import {connect} from 'react-redux';
import {fetchProductsAsync} from 'common/actions/fetchData';

const {Option} = Select;

class SelectOptions extends React.Component {
  state = {
    filteredData: [],
    value: undefined,
  };

  componentDidMount() {
    const {fetchProductsAsync} = this.props;
    fetchProductsAsync();
    const {products} = this.props;
    this.setState({filteredData: products || []});
  }

  componentDidUpdate() {
    console.log(this.state.filteredData);
  }

  filterData = (value) => {
    const {products} = this.props;
    const filData = products.filter((prod) …