如何格式化 React Select 的值
How to format value of the React Select
我使用 "react final forms" 和 "react select"。
我已经组织了一个界面和功能,但我有一点不喜欢。
React select 需要下一种格式的选项:
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
并且该值也应设置为 { value: 'chocolate', label: 'Chocolate' }.
但对我来说,在我的数据模型中(也发送到服务器)这样的值很奇怪 - { value: 'chocolate', label: 'Chocolate' },因为我只需要 'chocolate'.
简单的方法是在保存表单后将对象格式化为单个值,并在呈现元素之前从单个值格式化回对象。我知道如何在表格之外做到这一点,但在这种情况下,我应该为每个 select 元素分别解决这个问题。
我想做什么:
- 找到一种方法如何将反应 select 的值设置为单个值,例如 'chocolate' 而不是对象。
或
- 为 React select 组件创建一个包装器,并在设置时(很容易)和表单从该字段获取值时格式化值(我不知道该怎么做)。
如有任何帮助,我将不胜感激。
一旦将表单数据发送到服务器或其他组件,您就可以transform/filter对象数据。
将 react-select 的值设置为单个值 不会将其显示为 selected 在 React-Select.
方法一
带字符串:
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>
);
}
方法二:
创建示例:
https://codesandbox.io/s/react-codesandboxer-example-z57ke
您可以在选项中使用地图,并使用 SingleValueReactSelect 等 Wrapper
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>
);
}
我使用 "react final forms" 和 "react select"。
我已经组织了一个界面和功能,但我有一点不喜欢。
React select 需要下一种格式的选项:
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
并且该值也应设置为 { value: 'chocolate', label: 'Chocolate' }.
但对我来说,在我的数据模型中(也发送到服务器)这样的值很奇怪 - { value: 'chocolate', label: 'Chocolate' },因为我只需要 'chocolate'.
简单的方法是在保存表单后将对象格式化为单个值,并在呈现元素之前从单个值格式化回对象。我知道如何在表格之外做到这一点,但在这种情况下,我应该为每个 select 元素分别解决这个问题。
我想做什么:
- 找到一种方法如何将反应 select 的值设置为单个值,例如 'chocolate' 而不是对象。
或
- 为 React select 组件创建一个包装器,并在设置时(很容易)和表单从该字段获取值时格式化值(我不知道该怎么做)。
如有任何帮助,我将不胜感激。
一旦将表单数据发送到服务器或其他组件,您就可以transform/filter对象数据。
将 react-select 的值设置为单个值 不会将其显示为 selected 在 React-Select.
方法一
带字符串:
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>
);
}
方法二:
创建示例: https://codesandbox.io/s/react-codesandboxer-example-z57ke
您可以在选项中使用地图,并使用 SingleValueReactSelect 等 Wrapper
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>
);
}