0

我正在使用 Redux-form 并提取数据来初始化我的多选（下拉）框。这是来自 redux-form 站点的示例 - https://redux-form.com/6.0.0-rc.1/examples/react-widgets/他们使用 react-widgets 作为附加组件。

该示例允许您选择最喜欢的颜色，它将列出可用的选择。这是我的这个例子的代码框 - https://codesandbox.io/s/7z5q82np51

如果我不想选择预填充的值，我希望能够在框中添加我自己的选项/值。stackoverflow 上有一个重复/类似的问题 - Redux-Form 中的可编辑组合框，但我无法让解决方案正常工作 - 所以不要认为它不再相关（可能是旧版本）。

如果有人可以看到这是如何完成的或看到建议的解决方案并让它在我的代码沙盒示例中工作？欢迎使用任何带有 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);
4

1 回答 1

-1

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

使用react-select 和可创建的组件，我能够将两者合并。

于 2018-11-01T16:51:55.930 回答