将 Select prop 'isSearchable' 与 JSX 一起使用

Question

我正在尝试让我的 react-select 可搜索，但我遇到了问题。基本上，我的选项标签需要在 JSX 中，因为我的客户希望一目了然地查看用户的联系信息。但是，我认为 Select prop 'isSearchable' 仅在值是字符串时才有效。这是我的代码的样子：

我传入 Select 的 'options' 属性中的数据：

const createContactDisplay = (data) => {
    return data.map((contact) => ({
      label: (
        <Contact>
          <p>{contact.value.firstName}</p>
          <p>{contact.value.lastName}</p>
          <p>{contact.value.email}</p>
        </Contact>
      ),
      value: contact.key
    }));
  };

然后我将过滤后的联系人作为上面的数据传递，并将 React select 的 options 属性设置为该状态。

任何关于我应该做什么的建议将不胜感激！

Answer 1

来自 react-select 的 Select 接受一个选项数组，其中每个选项都是一个具有 label 和 value 属性的对象。如果要使用搜索功能，需要转换成Select能理解的选项格式：

const options = originalOptions.map((o) => ({
  label: o.contact.value.firstName,
  value: o.contact.value.firstName,
  data: o.contact.value, // to reference custom data field if needed
}));

<Select options={options} {...} />