Redux 形式的 React-Select

Question

我是 react-redux 的新手，我想用 react-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}
          />

我遇到了一个恼人的错误：“元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义”。怎么回事？

Answer 1

在您的表单字段中：

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/>。不过应该可以。