Как показать значение заполнителя в React / Formik Select Component? - PullRequest
Новая
       23

Как показать значение заполнителя в React / Formik Select Component?

0 голосов
/ 12 февраля 2019

У меня есть выпадающий список Выберите компонент.Этот компонент отображает значения элементов, которые мы получаем с сервера.В следующей схеме: 

[
  {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 Ответ

0 голосов
/ 12 февраля 2019

Видимо, есть много способов сделать это.Я выбрал самый простой.Я просто добавил тег 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>
...