如何格式化 React Select 的值答案

【问题标题】：How to format value of the React Select如何格式化 React Select 的值
【发布时间】：2019-11-01 06:55:34
【问题描述】：

我使用“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'。

简单的方法是在保存表单后将对象格式化为单个值，并在渲染元素之前从单个值格式化回对象。我知道如何在表单之外做到这一点，但在这种情况下，我应该为每个选择元素分别解决这个问题。

我想做的事：

找到一种方法如何将反应选择的值设置为单个值，例如“巧克力”而不是对象。

或

为反应选择组件创建一个包装器，并在它设置（这很容易）和表单从该字段获取值时（我不知道该怎么做）。

我将不胜感激。

【问题讨论】：

标签： reactjs react-select react-final-form

【解决方案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>
  );
}

方法二：

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

您可以在选项中使用 map 以及像 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>
  );
}

【讨论】：

您的示例帮助我将值从字符串格式化为元素包装器中的对象。我在上面写了这很容易，所以我可以自己做。但是当我改变 select 的值时，它会返回对象，但我需要一个字符串。如何强制选择返回字符串 - 这是一个问题。
这是自定义的 onChange 回调，正如我上面写的，我使用 react final 形式。当表单提交时，它自己从select接收值并且有对象。
添加了字符串和没有包装器的答案
带字符串的方法 #1 对我有用，非常感谢您的努力！带有标签的漂亮黑客。你为我节省了很多时间，让我避免了重复代码。

【解决方案2】：

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

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

【讨论】：

我不喜欢这种方法，因为那样我需要单独处理每个值。