Как использовать пользовательский ввод с Formik в реале? - программирование
Подтвердить что ты не робот

Как использовать пользовательский ввод с Formik в реале?

Я пытаюсь использовать DatePicker в Formik. Но когда я нажимаю DatePicker date, значение формы не изменяется. Вместо этого я получил эту ошибку:

Uncaught TypeError: e.persist не является функцией в Formik._this.handleChange(formik.es6.js: 5960)

Я сокращаю код, код ниже

const SomeComponent = () => (
    <Formik
        render={({
            values,
            handleSubmit,
            handleChange,
            setFieldValue
        }) => {
            return (
                <div>
                    <form onSubmit={handleSubmit}>
                        <DatePicker
                            name={'joinedAt'}
                            value={values['joinedAt']}
                            onChange={handleChange}
                        />
                    </form>
                </div>
            )
        }}
    />
)

Я погуглил несколько документов: https://github.com/jaredpalmer/formik/issues/187 и https://github.com/jaredpalmer/formik/issues/86.

Поэтому я попытался, как показано ниже, но это не работает.

 ...setFieldValue

 <DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={setFieldValue}
 />
4b9b3361

ОТВЕТЫ

Ответ 1

Я разрешаю это как

<DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={e => setFieldValue('joinedAt', e)}
 />

Ответ 2

Для html примитивных полей ввода handleChange работает как шарм, но для пользовательских компонентов вы должны использовать setFieldValue для обязательного изменения значения.

onChange={e => setFieldValue('joinedAt', e)}

Ответ 3

Принятый ответ не работает для меня и не показывает выбранную дату. Прошел почти год, поэтому могут быть некоторые изменения в реализации. Хотя это можно исправить с помощью toDateString() следующим образом

<DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={e => setFieldValue('joinedAt', e.toDateString())}
 />

Ответ 4

Если у вас более глубокая вложенность, вы должны использовать Formik Field. Пример:


<Formik
    validationSchema={schema}
    initialValues={initialValues}
    onSubmit={(values, actions) => {}}
>

  <Field name="colors" component={ColorsEditor}  colors={colorArray}/>
</Formik>


const ColorsEditor = ({ field, colors, form, ...props }) => {

    return (
        <div>
            <Button onClick={() => form.setFieldValue('colors', "myValue")}>
            </Button>
        </div>
    )
}

Таким образом, компонент Field уже содержит форму, в которой находится setFieldValue, который вы можете использовать там, где вам нужно. Он также включает в себя ошибки и необходимые поля для дополнительной настройки.