Инициализируйте Formik со значениями по умолчанию в зависимости от действий пользователя

Question

Я пытаюсь инициализировать форму Formik со значениями по умолчанию в зависимости от даты, когда пользователь нажимает на календарь.

Это должно быть легко сделать, но мой недостаток опыта в ReactJS и Formik не позволяет мне найти решение.

В последние дни я безуспешно пробовал разные способы. .

Буду признателен за помощь по этому вопросу. Спасибо.

Ниже я прилагаю диаграмму о проекте, чтобы лучше понять, что я пытаюсь сделать.

Заранее спасибо!

Answer 1

в formik у нас есть возможность получить доступ к значениям и что-то сделать с ними Поле проверки Посмотрите на код ниже, его компонент Formik

<Formik

     initialValues={{
        date: '',
     }}

     // Validating Data
     validate={values => {

     const errors = {};

      if (!values.date) {
        errors.date = 'Date Is Required';
      }
      if (values.date) {
        // We Have Date Now and User Selects it
        alert('Hello')
      }

      return errors;
     }}

     // Submit Action
     onSubmit={(values, { setSubmitting }) => {
        alert('form submitted')
        setSubmitting(false);
     }}
     >
     {({
      values,
      handleChange,
      errors,
      handleSubmit,
      setFieldValue
     }) => (

        <form onSubmit={handleSubmit}>
             <div>
                 <DatePicker
                     selected={values.date}
                     onChange={(time)=> setFieldValue("date", time)}
                     placeholderText={"Choose Time"}
                     showTimeSelect
                     timeFormat="HH:mm"
                     timeIntervals={15}
                     dateFormat="LLL"
                     timeCaption="Time"
                  />
              </div>
         <form />
     )}
    </Formik>

Вариант проверки может ответить на ваш вопрос

Answer 2

Наконец-то я решил проблему с сохранением в состоянии моего Модального компонента свойства initialValues ​​, которое Formik используется для инициализации полей.

Поэтому, когда EventEmitter запускает событие, слушатель получит пользовательские данные из календаря, и я инициализирую форму Formik с ее значениями по умолчанию.