Может ли избыточная форма принимать несколько значений из компонентаact-select? - PullRequest
Новая
       17

Может ли избыточная форма принимать несколько значений из компонентаact-select?

0 голосов
/ 08 ноября 2019

Я надеюсь отобразить несколько значений из компонентаact-select в моей избыточной форме, а затем передать эти значения в функцию, которая будет обновлять состояние. Это возможно? Может ли избыточная форма принимать несколько входов?

Спасибо!

1 Ответ

0 голосов
/ 12 ноября 2019

Да, это возможно. Вы должны создать пользовательский компонент, который обернет react-select и будет использовать реквизиты, переданные redux-form <Field component={YourCustomComponent} />.

  1. Здесь описано, каксоздайте такой пользовательский компонент в официальной документации redux-form.
  2. Здесь вы найдете такие уже реализованные компоненты, эти обтекания react-select и связывают их с redux-form: ReactJS: Как обернутьреагировать на выбор в поле формы-редуктора?
  3. Для обработки мульти значений, пожалуйста, обратитесь к этому SO ответу .

В принципе, примера кода из ресурса 3. (благодарность автору) должно быть достаточно для интеграции react-select + redux-form + обработки multi значений:

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
    />
  )
};
...