0

我正在尝试使用 react-select 小部件并将一个简单的字符串数组作为选项列表而不是默认{value, label}对象传递给它。我已经成功地将 react-select 配置为使用具有与默认属性不同的属性的对象，因此我认为将其配置为纯字符串就可以了。但事实并非如此，无论我选择哪个项目，小部件中的可见选择始终为空。

我正在使用 react-select 4.3.1，以下是一个简化的示例，展示了我所看到的行为：

import React from "react";
import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const optionsStringsOnly = ["Chocolate", "Strawberry", "Vanilla"];

const MyComponent = () => <Select options={options} />;

const MyComponent2 = () => (
  <Select
    options={optionsStringsOnly}
    getOptionLabel={(x) => x}
    getOptionValue={(x) => x}
  />
);

该MyComponent版本来自 react-select 示例，并按预期工作。该Mycomponent2版本不起作用，我不明白为什么。我已经成功地使用 getOptionLabel 和 getOptionValue 道具来使用具有不同形状的对象，但是对于纯字符串，这根本不起作用。

我知道还有其他关于在 react-select 中使用纯字符串的问题，但那些假设在将选项{value,label}传递给 react-select 之前将它们简单地转换为对象是可以接受的。我想避免这种情况，因为这需要稍后重新转换值，这在我的情况下真的很烦人。我想传入纯字符串并再次从 react-select 小部件中获取纯字符串。

我在这里做错了什么？如何使用纯字符串作为 react-select 的选项？

4

1 回答 1

0

大多数人使用状态 for value，与onChange控制它的处理程序一起使用。根据您的评论，您似乎只是在为典型的表单 POST 场景寻找一个包含值的表单字段，而不是处理一个组合的 JS 对象。

如果您提供映射和name道具，您可能会得到您需要的东西。通过做这个：

const MyComponent2 = () => {
  const options = optionsStringsOnly.map(it => ({value: it, label:it}));
  return <Select name="foo_select" options={options} />;
};

进行选择后，将value其应用于提供的隐藏表单字段name。如果您要在浏览器中检查源代码，您会看到：

<input name="foo_select" type="hidden" value="Chocolate">

道具在name这里很关键，因为这就是告诉 React-Select 首先包含隐藏字段的原因。

这样做的缺点是您无法以编程方式控制您的字段值。您可以设置隐藏字段的值，但它不会自动更新显示。

于 2021-10-06T19:58:20.167 回答