다중 선택 응답에서 선택 - redux - 양식을 사용하여 작동하지 않는다

Question

그래서 내가 멀티 선택 사용하여 redux - 양식 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 
} 

나는 값이 돌아 오는 DevTools로를 사용하여, 돌아 오는에 정확히 검사하는 것이 좋습니다, 어떤 값 소품은 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 
    /> 
) 
};