3

したがって、react-select から redux-form で複数選択を onBlur ハック(?) で使用しています。これは、送信時に選択したデータが値に含まれているため、カーテンの後ろで正常に動作しています

しかし、複数選択フィールドにアクセスした後（何も選択しなくても）、値がまったく表示されなくなります（これ以外は何も表示されません
画像 ））

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

これを機能させる方法の例を次に示します。反応選択 (1.0.0-rc.2)、還元型 (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
    />
  )
};
于 2017-01-20T11:33:08.133 に答える
1

のより新しいバージョンを使用したことはありませんreact-selectが、1 年前に、値を配列として取得するためにsplit()文字列値を取得し、それを再びコンポーネントに渡すという問題がありました。delimiterjoin()

このようなもの：

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

Redux DevTools を使用して、Redux で値が正確に何であるか、どの値 prop が に渡されるかを調べることをお勧めしreact-selectます。きっとそこに問題があると思います。

于 2016-12-12T16:13:41.190 に答える