Не может установить значение в виде строки вместо объекта в множественном выборе

Question

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

Вот код

const normalizedValue = (input, options, valueType, isMulti) => {
  if (valueType === "string" && !isMulti) {
    options.find(option => option.value === input.value);
  }
  if (valueType === "string" && isMulti) {
    console.log("input value", input);
    options.filter(option => option.value === input.value);
  }

  if (valueType === "object" && !isMulti) {
    options.find(option => option === input.value);
  }

  if (valueType === "object" && isMulti) {
    options.filter(option => option === input.value);
  }
};

const SearchableTextField = ({
  children,
  input,
  options,
  isMulti,
  valueType,
  ...props
}) => {
  return (
    <Select
      {...props}
      clearable={props.clearable}
      searchable={props.searchable}
      options={options}
      {...input}
      value={normalizedValue(input, options, valueType, isMulti)}
      onChange={option =>
        valueType === "string"
          ? input.onChange(option.value)
          : input.onChange(option)
      }
      onBlur={() => input.onBlur(input.value)}
      isMulti={isMulti}
    />
  );
};

const MyForm = reduxForm({ form: "MyForm" })(
  class extends React.PureComponent {
    handleSubmit(values) {
      console.log("values", values);
    }
    render() {
      const { handleSubmit } = this.props;
      return (
        <form onSubmit={handleSubmit(this.handleSubmit.bind(this))}>
          <Field
            name="myCoolSelect"
            component={SearchableTextField}
            options={[
              { value: "chocolate", label: "Chocolate" },
              { value: "strawberry", label: "Strawberry" },
              { value: "vanilla", label: "Vanilla" }
            ]}
            valueType="string"
            isMulti
          />
          <button type="submit">SUbmit</button>
        </form>
      );
    }
  }
);

Если у меня есть варианты как следующие

options = [
 {value: 'abc', label: 'ABC'},
 {value: 'abc2', label: 'ABC2'},
]

ожидаемый результат, когда я выбираю, предположим, что выбрана первая опция Option: "abc" в одиночном выделении, которое работает, и в нескольких оно должно быть выбрано Option: ["abc", "abc2"] (это не работает)

У меня также есть воспроизводимый код в песочнице https://codesandbox.io/s/wnvpnlj245

Answer 1

Проблема здесь

  onChange={option =>
    valueType === "string"
      ? input.onChange(option.value)
      : input.onChange(option)
  }

Вы также должны проверить здесь, если его мульти или нет. Потому что, когда его мульти, он передает значение как массив.

Попробуй как

 onChange={option => {
    valueType === "string"
      ? input.onChange(isMulti ? option.map(o => o.value) : option.value)
      : input.onChange(option)
    }
  }