Formik 表单提交空对象

Question

我是 React 和 Formik 的新手，我正在尝试创建一个登录表单。出于某种原因，对 API 的请求作为我创建的默认初始对象发送。这是代码：

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

结果如下：

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

Answer 1

使用 formik 的 handleChange

Please see this

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

Answer 2

我添加了 enableReinitialize={true}，它对我有用。

示例：

 <Formik
      initialValues={registrationValues}
      validationSchema={RegisterValidationSchema}
      onSubmit={submitHandlerRegister}
      enableReinitialize={true}
    >
   .....

Formik 表单提交空对象

Formik form submitting empty object

reactjs

formik