在 JSX 中使用 Select prop 'isSearchable'

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可以理解的option格式：

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} {...} />

在 JSX 中使用 Select prop 'isSearchable'

Using Select prop 'isSearchable' with JSX

javascript

reactjs

react-select