Как установить значение MenuSelect в логическое значение в форме Formik?

avatar
jemadd04
8 августа 2021 в 20:26
494
1
0

Я работаю в форме Formik, и у меня есть очень простой материал. Пользовательский интерфейс Выберите раскрывающийся список:

<FormControlLabel 
     control={
        (
          <Field component={Select} type="checkbox" name="isFoundationalSupport">
               <MenuItem value="yes">Yes</MenuItem>
               <MenuItem value="no">No</MenuItem>
               <MenuItem value="null">Unknown</MenuItem>
           </Field>
         )
      }
      label="Foundational support"
      labelPlacement="top"
 />

Для трех пунктов меню я хотел бы, чтобы значения были истинными, ложными или нулевыми, но это неприемлемые значения для поля значения в MenuItem. Является ли мой единственный способ использовать состояние компонента? Я надеялся не усложнять и придерживаться состояния и значений Formik, но не уверен, что в данном случае это возможно.

Источник

Ответы (1)

avatar
Ro Milton
9 августа 2021 в 07:10
1

Поскольку реквизит MenuItem value принимает только строку или число, вам придется преобразовать его в обработчик onChange.

Для этого вам не нужно никакого дополнительного состояния, вы можете просто использовать функцию formik setFieldValue().

// define all the options
const selectOptions = [
  { id: true, text: "Yes" },
  { id: false, text: "No" },
  { id: null, text: "Unknown" }
];

// and in the component
<FormControlLabel
  control={
    <Field
      component={Select}
      placeholder="Select One"
      type="checkbox"
      value={
        selectOptions.find(
          ({ id }) => id === values.isFoundationalSupport
        ).text
      }
      name="isFoundationalSupport"
      onChange={(e) => {
        if (e.target.value) {
          const { id } = selectOptions.find(
            ({ text }) => text === e.target.value
          );
          setFieldValue("isFoundationalSupport", id);
        }
      }}
    >
      {selectOptions.map(({ text }) => (
        <MenuItem key={text} value={text}>
          {text}
        </MenuItem>
      ))}
    </Field>
  }
  label="Foundational support"
  labelPlacement="top"
/>
       

Рабочий пример

jemadd04
11 августа 2021 в 18:11
0

Это сработало отлично, большое спасибо. Первоначально мое приложение вылетало из-за .text значения, когда было выбрано «Неизвестно» («Не удается найти .text of undefined»), поэтому я изменил идентификатор с нулевого на неопределенное и дал мне именно то, что я искал. Спасибо еще раз!