选择后，使用输入选择可选择的可搜索元素

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。