React Widgets + Redux-Form редактируемый выпадающий список - PullRequest
Новая
       5

React Widgets + Redux-Form редактируемый выпадающий список

0 голосов
/ 31 октября 2018

Я использую Redux-форму и извлекаю данные, чтобы инициализировать мой блок множественного выбора (выпадающий список). Вот пример этого с сайта в редукционной форме: https://redux -form.com / 6.0.0-rc.1 / examples / реагировать-виджеты / они используют реагирующие виджеты в качестве надстройки на.

В этом примере вы можете выбрать любимый цвет и перечислить доступные варианты. Вот мои коды и коробка этого примера - https://codesandbox.io/s/7z5q82np51

Я хочу иметь возможность добавить свой собственный параметр / значение в поле, если я не хочу выбирать предварительно заполненное значение. Существует повторяющийся / похожий вопрос о stackoverflow - Редактируемое поле со списком в Redux-Form , но я не могу заставить решение работать - поэтому больше не думаю, что оно актуально (возможно, старая версия).

Если кто-то может увидеть, как это делается, или увидеть предлагаемое решение и заставить его работать на моем примере кода и коробки? Любое решение с избыточной формой приветствуется для получения желаемого результата с мультиселектом, который также можно редактировать для создания моей собственной ценности. 

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import DropdownList from 'react-widgets/lib/DropdownList'
import SelectList from 'react-widgets/lib/SelectList'
import Multiselect from 'react-widgets/lib/Multiselect'
import 'react-widgets/dist/css/react-widgets.css'

const colors = [{ color: 'Red', value: 'ff0000' },
{ color: 'Green', value: '00ff00' },
{ color: 'Blue', value: '0000ff' }]

const MaterialUiForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Favorite Color</label>
        <Field
          name="favoriteColor"
          component={DropdownList}
          data={colors}
          valueField="value"
          textField="color" />
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: "MaterialUiForm", // a unique identifier for this form
})(MaterialUiForm);

1 Ответ

0 голосов
/ 01 ноября 2018

https://codesandbox.io/s/2vmmkmomk0

Используя Reaction-Select и созданный компонент, я смог объединить их.

...