问题描述
我有一个下拉选择组件。 该组件显示我们从服务器获取的元素的值。 在以下架构中：
[
{label: 1, value: 1},
{label: 2, value: 2},
{label: 3, value: 3},
]
我正在使用Formik并映射数据，以获取值。 问题是，我没有占位符值，因此用户认为该值已被选择。
我正在阅读formik示例，但没有发现任何类似的东西。
是一个有效的例子，来自formik例子
我正在尝试强制使用占位符，但这是行不通的。 有任何想法吗？
<div className="py-3">
<label>
<span className="font-weight-bold">Select Group</span>
<span className="text-danger">*</span>
</label>
<Field
name="group"
component="select"
placeholder="Select Group (Just one)"
className={classNames('form-control', {
'is-invalid': errors.group && touched.group
})}
>
{groups.map(group => (
<option key={group.label} value={group.value}>
{group.value}
</option>
))}
</Field>
{errors.group && touched.group ? (
<div className="text-danger">{errors.group}</div>
) : null}
</div>
当前 ，组具有从服务器返回的第一项的初始值。
我想显示占位符，就像上面的代码一样。
这个placeholder="Select Group (Just one)"
1楼
Dimitris Efst
1
已采纳
2019-02-12 19:54:56
显然，有很多方法可以做到这一点。
我选择了最简单的一种。
我只是在第二个选项字段中添加了defaultValue标记。
这允许显示默认值，并且您可以在渲染下拉菜单中通过mapped选项进行选择：
像这样：
<div className="py-3">
<label>
<span className="font-weight-bold">Select Group</span>
<span className="text-danger">*</span>
</label>
<Field
name="group"
component="select"
className={classNames('form-control', {
'is-invalid': errors.group && touched.group
})}
>
<option defaultValue>Select Group (Just one)</option>
{groups.map(group => (
<option key={group.label} value={group.value}>
{group.value}
</option>
))}
</Field>
</div>