web-dev-qa-db-fra.com

Comment utiliser une entrée personnalisée avec Formik dans React?

J'essaie d'utiliser DatePicker dans Formik . Mais lorsque je clique sur la date de DatePicker, sa valeur de forme n'est pas modifiée. Au lieu de cela, j'ai eu cette erreur:

Uncaught TypeError: e.persist n'est pas une fonction chez Formik._this.handleChange (formik.es6.js: 5960)

Je raccourcis le code, le code est ci-dessous

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

J'ai googlé quelques documents, https://github.com/jaredpalmer/formik/issues/187 et https://github.com/jaredpalmer/formik/issues/86

Alors j'ai essayé comme ci-dessous, mais ça ne marche pas.

 ...setFieldValue

 <DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={setFieldValue}
 />
reactjsreact-nativematerial-uiformik
14
Juntae

Je résous ceci comme

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

Pour les champs de saisie primitifs html, handleChange fonctionne comme un charme, mais pour les composants personnalisés, vous devez utiliser setFieldValue pour modifier la valeur impérativement.

onChange={e => setFieldValue('joinedAt', e)}
0
Imdadul Huq Naim

Si vous faites une imbrication plus profonde, vous devriez utiliser Formik Field . Exemple:


<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>
    )
}

Ainsi, le composant Field inclut déjà le formulaire, où réside le setFieldValue que vous pouvez utiliser où vous avez besoin. Il inclut également les erreurs et les champs nécessaires pour une personnalisation supplémentaire.

0
Hugo Gresse

La réponse acceptée n'a pas fonctionné pour moi et n'affichait pas la date sélectionnée. Cela fait presque un an donc il pourrait y avoir des changements avec la mise en œuvre. Bien que cela puisse être résolu en utilisant toDateString() comme ceci

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