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不會跟蹤任何更改或提交。

在這里查看