3

所以我使用来自 react-select 的多选和 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 状态的值，但我看不到该字段中的任何值。有谁知道为什么会这样？

4

2 回答 2

11

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

选择输入.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
    />
  )
};
于 2017-01-20T11:33:08.133 回答
1

我没有使用过更现代的版本react-select，但是一年前，有一些问题是必须split()将字符串delimiter值作为数组获取，然后再将join()它们提供给组件。

像这样的东西：

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

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

于 2016-12-12T16:13:41.190 回答