reactjs - new - Selección múltiple de react-select con redux-form que no funciona como se pretendía

react select2

Question

Entonces iam usa selección múltiple de react-select con redux-form con onBlur hack (?) Que funciona bien detrás de la cortina porque cuando lo envío tengo los datos seleccionados en valores

PERO después de visitar cualquier campo de selección múltiple (incluso si no selecciono nada) termino sin ningún valor (no se muestra nada pero esto
)

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

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

Así que termino con valores en el estado de reducción, pero no puedo ver ningún valor en el campo. Alguien sabe por qué está pasando esto?

Answer 1

Aquí hay un ejemplo de cómo hacer que funcione. react-select (1.0.0-rc.2), redux-form (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
    />
  )
};

Answer 2

No he usado versiones más modernas de react-select , pero hace un año, hubo algunos problemas con tener que split() el valor de cadena por el delimiter para obtener los valores como una matriz, y luego join() nuevo para dar al componente.

Cosas como esta:

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

Recomiendo examinar exactamente cuál es el valor en Redux, usando Redux DevTools, y qué valor prop se pasa a react-select . Estoy seguro de que encontrarás el problema allí.