来自 react-select 的 Multi select with redux-form 没有按预期工作

Question

所以我使用来自 react-select 的 multi select 和 redux-form 以及 onBlur hack(?) 这在幕后工作正常因为当我提交它时我有 select在值中编辑数据

但是在访问任何多个 select 字段之后（即使我没有 select 任何东西）我最终没有任何值（除了这个
什么都没有显示 ))

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 版本，但是一年前，在 split() 字符串值 delimiter 获取值时遇到了一些问题作为一个数组，然后 join() 再次将它们提供给组件。

像这样的东西：

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

我建议使用 Redux DevTools 检查 Redux 中的值到底是什么，以及传递给 react-select 的值属性是什么。我相信您会发现问题所在。

Answer 2

这里是如何让它工作的例子。 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
    />
  )
};

来自 react-select 的 Multi select with redux-form 没有按预期工作

Multi select from react-select with redux-form not working as intended

reactjs

react-select

redux

redux-form