Question

我使用“反应最终形式”和“反应选择”。

我已经组织了一个界面并且功能正常，但是我有一件我不喜欢的东西。

反应选择需要以下格式的选项：

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

，该值也应设置为{value：“ chocolate”，标签：“ Chocolate”}。

但是对于我来说，在我的数据模型中拥有这样的值（也发送到服务器）很奇怪-{value：'chocolate'，label：'Chocolate'}，因为我只需要'chocolate'。

简便的方法是在保存表单后将对象格式化为单个值，并在呈现元素之前将其从单个值格式化回该对象。我知道如何在表单之外执行此操作，但是在这种情况下，我应该一次又一次地为每个选择元素解决此问题。

我想做什么：

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

OR

创建一个包装，用于反应选择组件，并在设置时格式化值（很容易）以及表单从该字段获取值时格式化（这我不知道如何做）。

我将不胜感激。

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中将其显示为选定的 。

如何格式化React Select的值

2 个答案: