Formik resetForm не сбрасывает вложенные значения (массивы и объекты) - PullRequest
Новая
       65

Formik resetForm не сбрасывает вложенные значения (массивы и объекты)

0 голосов
/ 19 июня 2020

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

const FormikSearch = withFormik({
   mapPropsToValues(){
      return {
         "FDID": '',
         "Fire dept name": '',
         "HQ city": '',
         "HQ state": '',
         "HQ zip": '',
         "County": '',
         "Dept Type": [],
         "Organization Type": [],
         "Active Firefighters - Career": { use: null, min:'', max: '' },
         "Active Firefighters - Volunteer": { use: null, min:'', max: '' },
         "Active Firefighters - Paid per Call": { use: null, min:'', max: '' },
         "Non-Firefighting - Civilian": { use: null, min:'', max: '' },
         "Non-Firefighting - Volunteer": { use: null, min:'', max: '' },
      }
   },
   handleSubmit(values){
      console.log(values)
   }
})(Search)

Внутри формы я сопоставляю некоторые списки, чтобы создать набор флажков. Для групп «Тип отдела» или «Тип организации» флажки добавляются или удаляются из массива в объекте formik values в зависимости от того, отмечены они или нет. Для значений «Пожарные» (любое из значений с начальным значением { use: null, min:'', max: '' }) установка флажка переключит значение use, а если use истинно, это позволит заполнить другие поля формы. . 

const Search = ({
   values,
   setFieldValue,
   resetForm
}) => {

   return ( 

      //-- various simple text fields --//

      {deptTypes.map(type =>
         <label key={type.value}>
            <input 
               type="checkbox"
               name="Dept Type"
               value={type.value}
               checked={values["Dept Type"].includes(type.value)}
               onChange={ e => {
                  if (!values["Dept Type"].includes(type.value)){
                     values["Dept Type"].push(type.value)
                  } else {
                     const idx = values["Dept Type"].indexOf(type.value)
                     values["Dept Type"].splice(idx, 1)
                  }
                  setFieldValue("Dept Type", values["Dept Type"])
               }}
            />
            <span>{type.name}</span>
         </label>
      )}

      {/* similar map over "Organization Type" array */}

      {firefighterTypes.map( type => (
         <div key={type} >
            <label>
               <input 
                  type="checkbox" 
                  name={type}
                  checked={values[type].use}
                  onChange={ e => {
                     if (!values[type].use){
                        values[type].use = true
                     } else {
                        values[type].use = false
                     }
                     setFieldValue(type.use, values[type].use)
                  }} />
               <span>{type}</span>
            </label>

            <div className={`min-max-inputs ${!values[type].use ? 'disabled' : ''}`}>
               <label>
                  <span>At Least:</span>
                  <Field 
                     type="number" 
                     name={`${type}.min`}
                     min="0"
                     disabled={!values[type].use} />
               </label>
               <label>
                  <span>At Most:</span>
                  <Field 
                     type="number" 
                     name={`${type}.max`}
                     max="0"
                     disabled={!values[type].use} />
               </label>
            </div>

         </div>
      ))}
   )
}

Извините, если это немного многословно, я хочу показать, почему я организовываю вещи таким образом. Объект values при работе с формой отвечает ожидаемым образом. В конце формы у меня есть кнопки «Очистить» и «Поиск» / «Отправить». Кнопка «Очистить» вызывает функцию resetForm (и кнопка отправки также вызывает это после отправки формы).

Ожидаемое поведение:

Значения формы возвращаются к исходным значения, определенные в mapPropsToValues, и форма становится пустой, как и при первом ее открытии.

Текущее поведение:

Все значения формы go возвращаются к исходным значениям кроме тех, которые начинаются как массивы или объекты. Все числовые и текстовые поля становятся пустыми, но флажки не становятся пустыми. Это также отражено в console.log значений формы, которые сохраняют свои значения даже после вызова resetForm.

Коды и окно кода, демонстрирующее проблему

Щелчок по Кнопки «Очистить» или «Поиск» будут записывать values в консоль, чтобы вы могли видеть, как Formik реагирует на ввод пользователя. Любая помощь приветствуется, спасибо за чтение.

...