React Widgets + Redux-Form 可编辑下拉菜单
React Widgets + Redux-Form editable dropdown
我正在使用 Redux-form 并提取数据来初始化我的多 select(下拉) 框。这是来自 redux-form 站点的示例 - https://redux-form.com/6.0.0-rc.1/examples/react-widgets/ 他们使用 react-widgets 作为附加组件。
该示例允许您 select 最喜欢的颜色,它会列出可用的 select 离子。这是我的这个例子的codesandbox - https://codesandbox.io/s/7z5q82np51
如果我不想选择预先填充的值,我希望能够在框中添加我自己的 option/value。在 Whosebug 上有一个 duplicate/similar 问题 - 但我无法找到解决方案 - 所以不再认为它相关(可能是旧版本)。
是否有人可以看到这是如何完成的,或者看到建议的解决方案并将其用于我的 codesandbox 示例?欢迎使用 redux-form 的任何解决方案获得具有多个的预期结果select,这也可编辑以创建我自己的值。
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);
我正在使用 Redux-form 并提取数据来初始化我的多 select(下拉) 框。这是来自 redux-form 站点的示例 - https://redux-form.com/6.0.0-rc.1/examples/react-widgets/ 他们使用 react-widgets 作为附加组件。
该示例允许您 select 最喜欢的颜色,它会列出可用的 select 离子。这是我的这个例子的codesandbox - https://codesandbox.io/s/7z5q82np51
如果我不想选择预先填充的值,我希望能够在框中添加我自己的 option/value。在 Whosebug 上有一个 duplicate/similar 问题 -
是否有人可以看到这是如何完成的,或者看到建议的解决方案并将其用于我的 codesandbox 示例?欢迎使用 redux-form 的任何解决方案获得具有多个的预期结果select,这也可编辑以创建我自己的值。
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);