从反应选择多重选择与redux形式不按预期工作

Question

所以iam使用反应选择反应选择与redux-form与onBlur hack(？)在幕后工作正常,因为当我提交它时我在值中选择了数据

但是在访问任何多选字段后(即使我没有选择任何东西)我最终没有任何值(没有显示但是这个
))

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

<Select
            value="one"
            options={options}
            multi={true}
            {...input}
            onBlur={() => {
              input.onBlur({...input.value})
            }
          }
        />

所以我最终得到了redux状态的值,但我看不到该字段中的任何值.任何人都知道为什么会这样吗？

Answer 1

以下是如何使其工作的示例.react-select(1.0.0-rc.2),redux-form(5.3.4)

SelectInput.js

import React from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

export default (props) => (
  <Select
    {...props}
    value={props.input.value}
    onChange={(value) => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
  />
);

MyAwesomeComponent.js

import React, {PureComponent} from 'react';
import SelectInput from './SelectInput.js';

class MyAwesomeComponent extends PureComponent {
  render() {
    const options = [
      {'label': 'Germany', 'value': 'DE'},
      {'label': 'Russian Federation', 'value': 'RU'},
      {'label': 'United States', 'value': 'US'}
    ];
  return (
    <Field
      name='countries'
      options={options}
      component={SelectInput}
      multi
    />
  )
};