如何格式化React Select的值

Question

我使用"react final forms"one_answers"react select"。

我已经组织了一个界面和功能，但我有一件事我不喜欢。

React select需要下一种格式的选项：

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

并且该值也应该设置为{value:"chocolate"，label:"chocolate"}。

但对我来说，在我的数据模型中(并发送到服务器(有这样的值是很奇怪的——{value:"巧克力"，标签："巧克力"}，因为我只需要"巧克力"。

简单的方法是在保存表单后将对象格式化为单个值，并在呈现元素之前将其从单个值格式化回对象。我知道如何在表单之外完成它，但在这种情况下，我应该分别为每个select元素一次又一次地解决这个问题。

我想做的事：

1. 找到一种方法，如何将反应选择的值设置为单个值，比如"巧克力"而不是对象

或

2. 为react select组件创建一个包装器，并在它设置时(这很容易(和表单从该字段获得值时(我不知道如何做到(在那里格式化值

如有任何帮助，我将不胜感激。

Answer 1

方法1

带字符串：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
const data = ["1", "2"];
function SingleStringReactSelect() { 
const [option, setOption] = useState();
return (
<section>
<Select 
onChange={option => setOption(option)}
value={[option]}
getOptionLabel={label => label}
getOptionValue={value => value}
closeMenuOSelect={false}
options={data}
/>
</section>
);
}

方法2:

创建示例：https://codesandbox.io/s/react-codesandboxer-example-z57ke

您可以在选项中使用映射，并使用类似SingleValueReactSelect 的包装器

import React, { Fragment, useState } from "react";
import Select from "react-select";
const data = ["chocolate", "strawberry", "vanilla"];
export function SingleValueReactSelect(props) {
const [selectedItem, setSelectedItem] = useState();
return (
<Select
{...props}
value={selectedItem}
onChange={item => {
setSelectedItem(item);
props.onChange(item.value);
}}
options={props.options.map(item => ({ label: item, value: item }))}
/>
);
}
export default function AppDemo() {
return (
<Fragment>
<p>SingleValueReactSelect Demo</p>
<SingleValueReactSelect
isClearable
isSearchable
options={data}
onChange={item => {
alert(item);
}}
/>
</Fragment>
);
}

Answer 2

一旦将表单数据发送到服务器或其他组件，就可以转换/过滤对象数据。

将react select的值设置为单个值将不会在react select中将其显示为选中。

Answer 3

getOptionLabel={option => option["your query"]}
getOptionValue={option =>option["your query"]}