Как отформатировать значение React Select

Question

Я использую «реагировать на окончательные формы» и «реагировать на выбор».

Я организовал работу интерфейса и функционала, но у меня есть одна вещь, которая мне не нравится.

Для выбора ответа требуются параметры в следующем формате:

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

, а также значение должно быть установлено как {value: 'chocolate', label: 'Chocolate'}.

Но для меня это странноиметь в моей модели данных (и отправлять на сервер тоже) значение, подобное этому - {value: 'chocolate', label: 'Chocolate'}, потому что мне нужен только 'chocolate'.

Простой способформатирование объекта в одно значение после того, как форма будет сохранена, и форматирование обратно от одного значения до объекта перед рендерингом элемента. Я знаю, как сделать это вне формы, но в этом случае я должен решить эту проблему снова и снова для каждого элемента выбора отдельно.

Что я хотел бы сделать:

1. Найдите способ установить значение реагирования, выбираемое как одно значение, например «шоколад» вместо объекта.

ИЛИ

Создайте оболочку для компонента реагировать на выбор и отформатировать значение там, когда оно устанавливается (это легко), и когда форма получает значение из этого поля (это я не знаю, как это сделать).

Буду признателен за любую помощь.

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

Вы можете использовать карту в настройкахи с Wrapper, как 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

Вы можете преобразовать / отфильтровать данные объекта, как только вы отправляете данные формы на сервер или другой компонент.

Установка значения response-select как единственного значения не будет отображаться как выбранный в React-Select.