複数の選択から反応を選択して還元形を意図した通りにしない

Question

私はそれを提出すると、私は幕の後ろでうまく働いている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状態で値で終わるが、私は見ることができないフィールド内の任意の値。誰もがなぜこれが起こっているのか知っていますか？

Answer 1

私はreact-selectのより現代的なバージョンを使用しますが、一年前にあった、いくつかの問題を配列として値を取得するためにsplit()にdelimiterにより、文字列値を持つとして、join()それらを再び与えることをしていません成分。このような

スタッフ：

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

私は、値が再来している正確に何を調べるReduxのデベロッパーツールを使用して、どのような値小道具react-selectに渡さなっているお勧めします。あなたがそこで問題を見つけられると確信しています。

Answer 2

これを動作させる方法の例を次に示します。反応選択（1.0.0-rc.2）、Reduxの型（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 
    /> 
) 
};