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。

选择后使用输入来反应选择可搜索元素

1 个答案: