Formik 值为空

Question

我有以下 Formik 表格

<Formik
  initialValues={{
    email: '',
    password: ''
  }}
  onSubmit={(values, { setSubmitting }) => {
    console.log(JSON.stringify(values));
    setSubmitting(true);
    fetch('/login', {
      method: 'POST',
      body: JSON.stringify(values),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(res => res.json())
      .then(response => {
        console.log(response);
        setSubmitting(false);
        if (!response.success) return showAlert();
        login(response.user);
        history.push('/');
      })
      .catch(console.log);
  }}
>
  {({ isSubmitting }) => (
    <Form className={classes.form}>
      <TextField
        required
        variant="outlined"
        margin="normal"
        fullWidth
        label="Email"
        name="email"
        autoFocus
      />
      <TextField
        required
        variant="outlined"
        margin="normal"
        fullWidth
        name="password"
        label="Wachtwoord"
        type="password"
      />
      <Button
        type="submit"
        fullWidth
        variant="contained"
        color="primary"
        className={classes.submit}
        disabled={isSubmitting}
      >
        Log in
      </Button>
      <Grid container>
        <Grid item xs>
          <Link href="/register" variant="body2">
            {'Nog geen account? Registreer nu!'}
          </Link>
        </Grid>
      </Grid>
    </Form>
  )}
</Formik>

出于某种原因， onSubmit中的值是空的，如何将其设置为表单内的值？ 这个表单和我开始工作的另一个表单之间的唯一区别是这个表单没有验证模式，但我无法想象这是必需的

Answer 1

您应该查看formik 文档中的示例。

TextField未连接到Formik 。 当TextField的值改变时， Formik不会改变，你需要Field ( import { Field } from 'formik' ) 来渲染TextField 。

email示例

<Field
    name="email"
    render={({ field /* _form */ }) => (
        <TextField 
            required
            variant="outlined"
            margin="normal"
            fullWidth
            label="Email"
            autoFocus            
            {...field} 
        />
    )}
/>

如果您使用的是外部输入，则应该使用这种方式。

Answer 2

你需要通过这个

onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}

到Textinput ，以及 Password 。 您的Textinput不会跟踪任何更改或提交。

在这里查看