2016-12-11 6 views
1

Итак, я использую multi select from response-select with redux-form с помощью onBlur hack (?), Который отлично работает за занавеской, потому что, когда я его отправлю, есть выбранные данные в значенияхMulti select from response-select with redux-form не работает по назначению

нО после посещения любого множественного выбора поля (даже если я не что-нибудь выбрать) Я в конечном итоге не значения на всех (не отображается ничего, но это
image ))

const options = [ 
    { value: 'one', label: 'One' }, 
    { value: 'two', label: 'Two' } 
]; 

<Select 
      value="one" 
      options={options} 
      multi={true} 
      {...input} 
      onBlur={() => { 
       input.onBlur({...input.value}) 
      } 
      } 
     /> 

Так что я получаю значения в состоянии redux, но я не могу видеть любые значения в поле. Кто-нибудь знает, почему это происходит?

ответ

0

Я не использовал более современные версии react-select, но год назад, были некоторые проблемы с необходимостью split() значение строки по delimiter, чтобы получить значения в виде массива, а затем join() их снова раздай компонент.

Такие вещи, как это:

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

Я рекомендую изучение именно то, что значение находится в Redux, используя Redux DevTools, и какое значение проп становится передается react-select. Я уверен, что вы найдете там проблему.

+0

спасибо для ваш ответ Эрик. Я сделал именно это после публикации этого вопроса, и оказалось, что мне пришлось передать массив выбранных значений в функции onBlur вместо объекта, так что 'input.onBlur ([... input.value])' решил проблему. Сказав, что вы рекомендуете использовать что-то другое, кроме реакции-select? Кроме того, использование redux-формы затрудняет контроль состояния входных данных формы. Вы рекомендуете его для кого-то нового для сокращения? – eersteam

+0

PS Я знаю, что редукционная форма - это ваше репо, поэтому я надеюсь, что вы не пристрастны (хе-хе) – eersteam

+0

Хех. Существует еще один lib, называемый «реакция-редукция-форма», который может лучше соответствовать вашему образу мышления. И нет, у меня нет лучшей альтернативы реакции - выберите для нескольких выборов. –

8

Вот пример, как это сделать. реагируют-выбора (1.0.0-РК-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 
    /> 
) 
}; 
+0

Это хорошо работает как с несколькими, так и с несколькими режимами. – turhanco

+0

Лучший ответ! Спаси меня день! – klijakub