多选反应选择，redux-form不按预期工作

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
    />
  )
};

Answer 2

我没有使用更多现代版本的react-select，但一年前，split()必须使用delimiter字符串值来获取值作为一个问题数组，然后join()再次给予组件。

这样的东西：

if (multi) {
  selectValue = value ? value.join(delimiter) : ''
} else {
  selectValue = value || null
}

我建议使用Redux DevTools准确检查Redux中的值，以及将值传递给react-select的值。我相信你会在那里找到问题。