React-Select в сокращенной форме

Я новичок в response-redux, и я хочу создать раскрывающийся список с помощью response-select. Я создал свой компонент DropDown следующим образом:

import React, { PropTypes } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

const options = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' }
];

const MyDropdown = ({ input }) => (
  <div>
    <Select
      {...input}
      value="one"
      options={options}
      multi={true}
      onBlur={() => {
        input.onBlur([...input.value]);
      }
    }
    />
  </div>
);

MyDropdown.propTypes = {
  input: PropTypes.string.isRequired
};

export default MyDropdown;

и я рендер здесь

<Field
            id="status"
            name="status"
            component={MyDropdown}
          />

У меня возникла досадная ошибка: «Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined». В чем дело?


reactjs redux-form react-select
person user7334203    schedule 01.03.2017    source источник
comment
Откуда взялось «Поле»? Это что-то вроде Bootstrap?   -  person Tom McIntyre    schedule 01.03.2017
comment
Поле импортируется из redux-form   -  person user7334203    schedule 01.03.2017
comment
Мы вводим правильное известное значение = {input.value}   -  person user7334203    schedule 01.03.2017
comment
Можете ли вы добавить полную трассировку стека ошибки? Как вы импортируете MyDropdown? Поскольку MyDropdown не определено, возможно, проблема связана с импортом.   -  person Deividas Karzinauskas    schedule 01.03.2017

Ответы (1)


arrow_upward
1
arrow_downward

В вашей форме для поля:

const options = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' }
];

<Field
            id="status"
            name="status"
            component={MyDropdown}
            options={options}
            clearable={false}
          />

Ваш компонент должен выглядеть примерно так:

import React, { PropTypes } from 'react';
import Select from 'react-select';

const MyDropdown = ({ input, ...props }) => {
 const handleBlur = () => input.onBlur
 return (
   <div>
        <Select
          instanceId={input.name}
          {...input}
          {...props}
          onBlur={handleBlur}
        />
   </div>
 )
}

Если это не сработало, проверьте переданные ему параметры и создайте собственный метод внутри вашего компонента MyDropdown, чтобы сгенерировать параметры из переданного вами списка и передать его в качестве реквизита в <select/>. Однако это должно сработать.

person bh4r4th    schedule 04.01.2018
comment
Как бы вы передать значение из поля в Select? В настоящее время у меня возникла проблема: O? - person Jamie Hutber; 25.09.2018
comment
Параметры @Jamie Hutber в поле - это список пар "ключ-значение", переданных компоненту "Выбрать в MyDropdown". - person bh4r4th; 25.09.2018
comment
Ах, так что бы вы поместили значение в _1 _.... очень приятно, спасибо, мой друг !! - person Jamie Hutber; 25.09.2018