选择后带有输入的反应选择可搜索元素

Question

所以我在使用 react-select 时遇到了一些困难。我的目标是拥有一个可搜索的选择元素，但选择选项时，我需要将更多的字母/数字添加到其中。例如，我选择带有标签“+372”的选项，然后我需要向它添加更多数字并将其作为我的最终值。我想知道 react-select 是否可以实现。

这里是一些代码https://pwl4jj0qoq.codesandbox.io/

Answer 1

如果您事先知道应该显示什么最终值，我建议您使用here 解释的一些技术。

总而言之，您可以更改您的选项，如下所示：

const options = [
  {
    label:
      "+372",
    // you can name this new prop has you want
    chipLabel: "+372000",
    value: "37200"
  },
  {
    label:
      "+373",
    chipLabel: "+37300",
    value: "37300"
  },
  {
    label:
      "+374,
    chipLabel: "+37400",
    value: "37400"
  }
];

然后覆盖显示所选选项的组件：

const SingleValue = props => (
  <components.SingleValue {...props}>
    {props.data.chipLabel}
  </components.SingleValue>
);

<Select options={options} components={{ SingleValue }} />

现场示例here。