向 react-select 框添加前缀的最佳方法

Question

我正在使用 react-select 并想知道如何让组件为所选标签添加前缀 Show: 或我想要的任何其他副本？我宁愿将其烘焙到组件中而不是更改标签。希望这是可能的。

奖金问题：如何轻松删除 DropdownIndicator 上的左边框线。它似乎根本不是指标的一部分。

Answer 1

您可以覆盖 Select 的每个 sub-components 以更改组件的行为。在您的情况下，为所选值加上您想要的前缀。这是一个让您入门的小示例。

如果要删除IndicatorSeparator组件，只需创建一个相应的组件即可returns null

const VALUE_PREFIX = "Show: ";

export default function MySelect() {
  return (
    <Select
      options={options}
      placeholder="All"
      components={{
        SingleValue: ({ children, ...props }) => {
          return (
            <components.SingleValue {...props}>
              {VALUE_PREFIX + children}
            </components.SingleValue>
          );
        },
        Placeholder: ({ children, ...props }) => {
          return (
            <components.Placeholder {...props}>
              {VALUE_PREFIX + children}
            </components.Placeholder>
          );
        },
        IndicatorSeparator: () => null,
      }}
    />
  );
}

向 react-select 框添加前缀的最佳方法

Best way to add a prefix to a react-select box

reactjs

react-select

现场演示