react formik条件呈现初始值

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

const initialValues = {
  name: "",
  email: "",
  showAge: false,
  age: ""
};

const App = () => {
  return (
    <div>
      <h1>React Formik 条件呈现初始值示例</h1>
      <<Formik initialValues={initialValues} onSubmit={handleSubmit}>
        {({ values }) => (
          <Form>
            <div>
              <label htmlFor="name">姓名:</label>
              <Field type="text" id="name" name="name" />
            </div>
            <div>
              <label htmlFor="email">邮箱:</label>
              <Field type="email" id="email" name="email" />
            </div>
            <div>
              <label htmlFor="showAge">显示年龄:</label>
              <Field type="checkbox" id="showAge" name="showAge" />
            </div>
            {values.showAge && (
              <div>
                <label htmlFor="age">年龄:</label>
                <Field type="text" id="age" name="age" />
              </div>
            )}
            <button type="submit">提交</button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

const handleSubmit = (values) => {
  console.log(values);
};

export default App;