Formulaire Formik soumettant un objet vide

Question

Je suis nouveau dans react et Formik et j'essaie de créer un formulaire de connexion. Pour une raison quelconque, la demande à l'API est envoyée comme l'objet initial par défaut que j'ai créé. Voici le code :

import { Formik, Form } from 'formik';
import { observe } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import { Input , Button } from 'semantic-ui-react';
import { useStore } from '../application/stores/store';

export default observer(function LoginForm() {
    const {userStore} = useStore();
    return (
        <Formik
            initialValues={{user:'', password:''}}
            onSubmit={(values) => {
                console.log(JSON.stringify(values, null, 2));
                userStore.login(values)}
            }
        >
            {({handleSubmit ,isSubmitting})=> (
                <Form className='ui form' onSubmit={handleSubmit} autoComplete='off'>
                    <Input name='user' placeholder='User'/>
                    <Input name='password' placeholder='Password' type='password'/>
                    <Button loading={isSubmitting} positive content ='Login' type='submit' fluid/>
                </Form>
            )
        }
        </Formik>
    )    
})

et voici le résultat :

{
  "user": "",
  "password": ""
}

Answer 1

Utiliser handleChange de formik

Veuillez voir ceci

export default observer(function LoginForm() {
    const {userStore} = useStore();
    return (
        <Formik
            initialValues={{user:'', password:''}}
            onSubmit={(values) => {
                console.log(JSON.stringify(values, null, 2));
                userStore.login(values)}
            }
        >
            {({handleSubmit ,isSubmitting,handleChange})=> (
                <Form className='ui form' onSubmit={handleSubmit} autoComplete='off'>
                    <Input name='user' placeholder='User' onChange={handleChange}/>
                    <Input name='password' placeholder='Password' type='password' onChange={handleChange}/>
                    <Button loading={isSubmitting} positive content ='Login' type='submit' fluid/>
                </Form>
            )
        }
        </Formik>
    )    
})