React + Formik：使用嵌套对象的值

使用Formik和React可以轻松地构建复杂的表单，并管理表单中的输入值。在这篇文章中，我将向您展示如何使用Formik处理嵌套对象的值。嵌套对象是指在表单中有多个层级的值，例如表单中的一个字段是对象，而不仅仅是一个简单的字符串或数字。

javascript
import React from 'react';
import { useFormik } from 'formik';
const RegistrationForm = () => {
  const formik = useFormik({
    initialValues: {
      username: '',
      password: '',
      confirmPassword: ''
    },
    onSubmit: values => {
      console.log(values);
    }
  });
  return (
    
      用户名:
              id="username"
        name="username"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.username}
      />
      密码:
              id="password"
        name="password"
        type="password"
        onChange={formik.handleChange}
        value={formik.values.password}
      />
      确认密码:
              id="confirmPassword"
        name="confirmPassword"
        type="password"
        onChange={formik.handleChange}
        value={formik.values.confirmPassword}
      />
      注册
    
  );
};
export default RegistrationForm;

javascript
import React from 'react';
import { useFormik } from 'formik';
const RegistrationForm = () => {
  const formik = useFormik({
    initialValues: {
      username: '',
      password: '',
      confirmPassword: '',
      personalInfo: {
        firstName: '',
        lastName: '',
        email: ''
      },
      address: {
        street: '',
        city: '',
        state: '',
        zipCode: ''
      }
    },
    onSubmit: values => {
      console.log(values);
    }
  });
  return (
    
      用户名:
              id="username"
        name="username"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.username}
      />
      密码:
              id="password"
        name="password"
        type="password"
        onChange={formik.handleChange}
        value={formik.values.password}
      />
      确认密码:
              id="confirmPassword"
        name="confirmPassword"
        type="password"
        onChange={formik.handleChange}
        value={formik.values.confirmPassword}
      />
      
个人信息
      名:
              id="firstName"
        name="personalInfo.firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.personalInfo.firstName}
      />
      姓:
              id="lastName"
        name="personalInfo.lastName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.personalInfo.lastName}
      />
      邮箱:
              id="email"
        name="personalInfo.email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.personalInfo.email}
      />
      
地址信息
      街道:
              id="street"
        name="address.street"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.address.street}
      />
      城市:
              id="city"
        name="address.city"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.address.city}
      />
      州:
              id="state"
        name="address.state"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.address.state}
      />
      邮编:
              id="zipCode"
        name="address.zipCode"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.address.zipCode}
      />
      注册
    
  );
};
export default RegistrationForm;