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

您应该看看example in formik's docs。

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}

到文本输入，以及“密码”。 您的文本输入不会跟踪任何更改或提交。

Check here