отправить значение в виде строки при выборе опции

Question

Я использую реагирование-выбор для автозаполнения и поля, связанного с опцией. Когда я выбираю опцию, он передает весь этот объект опции как {value: 'abc', label: 'ABC'}, но я хотел только передать значение в виде строки, а не объекта. Таким образом, я использовал getOptionValue, но он не работает должным образом.

Это то, что я сделал

<Field
  name='status'
  component={SearchableText}
  placeholder="Search..."
  options={status}
  styles={styles}
  getOptionLabel={option => option.label}
  getOptionValue={option => option.value}
/>

Я использовал getOptionLabel и getOptionValue, но все еще передаю выбранную опцию в форме объекта, а не просто значение в виде строки.

Ожидаемый

status: 'active'

Текущее поведение

status: { value: 'active', label: 'Active'}

Answer 1

Я не смог найти getOptionValue в документах для реагирования-выбора, но вы всегда можете создать адаптер для реагирования-выбора. то есть создайте свой собственный компонент Select, который использует компонент Select реагировать внутренне. После этого становится возможным создать свой собственный getOptionValue. Вы можете использовать это, чтобы убедиться, что значение является строкой.

import React from "react";
import Select from "react-select";

class MySelect extends React.Component {
  getSelectValue() {
    return this.props.options.find(
      option => this.props.getOptionValue(option) === this.props.input.value
    );
  }

  render() {
    console.log("value", this.props.input.value);
    return (
      <Select
        value={this.getSelectValue()}
        onChange={option => {
          this.props.input.onChange(this.props.getOptionValue(option));
        }}
        options={this.props.options}
      />
    );
  }
}

MySelect.defaultProps = {
  getOptionValue: v => v
};

const MyForm = reduxForm({ form: "MyForm" })(
  class extends React.PureComponent {
    render() {
      return (
        <Field
          name="myCoolSelect"
          component={MySelect}
          options={[
            { value: "chocolate", label: "Chocolate" },
            { value: "strawberry", label: "Strawberry" },
            { value: "vanilla", label: "Vanilla" }
          ]}
          getOptionValue={option => option.value}
        />
      );
    }
  }
);

Выше приведен базовый пример того, как заставить это работать. Возможно, вы захотите передать другие входные данные или мета-реквизиты, чтобы воспользоваться преимуществами других функций в форме редукса. например onBlur, onFocus и т. Д. Вы можете увидеть это в действии здесь: https://codesandbox.io/s/6wykjnv32n