redux-form 可以接受来自 react-select 组件的多个值吗？答案

【问题标题】：Can a redux-form accept multiple values from a react-select component?redux-form 可以接受来自 react-select 组件的多个值吗？
【发布时间】：2019-11-07 23:49:33
【问题描述】：

我希望在我的 redux-form 中显示来自 react-select 组件的多个值，然后将这些值传递给将更新状态的函数。这可能吗？ redux-form 可以接受多个输入吗？

谢谢！

【问题讨论】：

嘿，你能检查我的答案吗？如果您有任何问题 - 请随时提问:)

标签： redux-form react-select

【解决方案1】：

是的，这是可能的。您必须创建一个自定义组件，它将包装 react-select 并使用由 redux-form <Field component={YourCustomComponent} /> 传递的道具。

Here's 在redux-form 官方文档中描述了如何创建这样一个自定义组件。
在这里，您会发现这些已经实现的组件，这些组件将react-select 包装起来并将它们与redux-form 连接起来：ReactJS: How to wrap react-select in redux-form field ?
为了处理multi值，请参考SO answer。

基本上，资源 3 中的代码示例。（感谢作者）应该足以集成 react-select + redux-form + 处理 multi 值：

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

【讨论】：