如何预填充react formik窗体

预填充React Formik表单可以通过以下步骤完成：

导入所需的依赖项：

import { Formik, Field, Form } from 'formik';

创建一个初始值对象，包含表单字段的默认值：

const initialValues = {
  name: '',
  email: '',
  password: '',
};

在Formik组件中使用initialValues属性将初始值传递给表单：

<Formik initialValues={initialValues} onSubmit={handleSubmit}>
  {/* 表单内容 */}
</Formik>

在表单中使用Field组件来渲染每个表单字段，并通过name属性指定字段名称：

<Field name="name" type="text" />
<Field name="email" type="email" />
<Field name="password" type="password" />

如果需要在表单字段中显示初始值，可以通过在Field组件中设置initialValue属性来实现：

<Field name="name" type="text" initialValue="John Doe" />

在表单提交处理程序中，可以通过values属性访问表单字段的当前值：

const handleSubmit = (values) => {
  console.log(values);
  // 执行表单提交逻辑
};

完整的示例代码如下：

import React from 'react';
import { Formik, Field, Form } from 'formik';

const initialValues = {
  name: '',
  email: '',
  password: '',
};

const handleSubmit = (values) => {
  console.log(values);
  // 执行表单提交逻辑
};

const MyForm = () => (
  <Formik initialValues={initialValues} onSubmit={handleSubmit}>
    <Form>
      <label htmlFor="name">Name:</label>
      <Field name="name" type="text" />

      <label htmlFor="email">Email:</label>
      <Field name="email" type="email" />

      <label htmlFor="password">Password:</label>
      <Field name="password" type="password" />

      <button type="submit">Submit</button>
    </Form>
  </Formik>
);

export default MyForm;

这样，当你渲染MyForm组件时，表单字段将自动填充为初始值。你可以根据需要修改initialValues对象中的值来预填充不同的表单字段。