如何在 React/Formik Select Component 上显示占位符值？答案

【问题标题】：How to show placeholder value on React/Formik Select Component?如何在 React/Formik Select Component 上显示占位符值？
【发布时间】：2019-07-06 02:08:23
【问题描述】：

我有一个下拉选择组件。该组件显示我们从服务器获取的元素的值。在以下架构中：

[
  {label: 1, value: 1},
  {label: 2, value: 2},
  {label: 3, value: 3},
]

我正在使用 Formik 并映射数据，以获取值。问题是，我没有占位符值，因此用户认为该值已被选中。

我正在阅读 formik 示例，但我没有找到任何类似的东西。

Here 是一个工作示例，来自 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)"

【问题讨论】：

标签： javascript reactjs forms select formik

【解决方案1】：

显然，有很多方法可以做到这一点。我选择了最简单的一个。我刚刚在第二个选项字段中添加了一个 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>

【讨论】：