React-hook-form：如何避免表单嵌套并让styled-components子组件读取表单值

解决方法 #

1. 主表单传递React-hook-form上下文给子组件 #

主组件通过useForm初始化表单后，将register、control等核心方法作为 props 传递给子组件，让子组件的输入控件与主表单共享同一个表单上下文，从根源避免嵌套表单的同时，保证默认值能被正确读取。

示例主组件代码：

import { useForm } from 'react-hook-form';
import CreateAccountForm from './CreateAccountForm';
import styled from 'styled-components';

const MainFormContainer = styled.form`
  /* 主表单样式 */
`;

export default function MainForm() {
  const { register, control, handleSubmit, defaultValues } = useForm({
    defaultValues: {
      username: '',
      acceptTerms: false, // 复选框默认值
      email: ''
      // 其他字段配置
    },
  });

  const onSubmit = (data) => {
    console.log('提交数据:', data);
  };

  return (
    <MainFormContainer onSubmit={handleSubmit(onSubmit)}>
      {/* 主表单自有字段 */}
      <input type="email" {...register('email')} placeholder="邮箱" />
      
      {/* 传递表单上下文给子组件 */}
      <CreateAccountForm register={register} control={control} />
      
      <button type="submit">提交表单</button>
    </MainFormContainer>
  );
}

2. 子组件改用div容器，复用主表单注册方法 #

将子组件的SubFormContainer改为styled.div，移除子组件内部的<form>标签，直接使用主组件传递的register或Controller绑定输入控件，确保子组件作为主表单的一部分正常工作。

示例子组件代码：

import styled from 'styled-components';
import { Controller } from 'react-hook-form';

const SubFormContainer = styled.div`
  /* 子表单容器样式 */
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 4px;
`;

export default function CreateAccountForm({ register, control }) {
  return (
    <SubFormContainer>
      {/* 普通输入框直接用register绑定 */}
      <input
        type="text"
        {...register('username')}
        placeholder="用户名"
        style={{ display: 'block', marginBottom: 12 }}
      />

      {/* 复选框用Controller处理状态同步，适配默认值 */}
      <Controller
        name="acceptTerms"
        control={control}
        render={({ field: { onChange, value } }) => (
          <label>
            <input
              type="checkbox"
              checked={value}
              onChange={(e) => onChange(e.target.checked)}
            />
            同意服务条款与隐私政策
          </label>
        )}
      />
    </SubFormContainer>
  );
}

关键注意事项 #

• 子组件禁止单独调用useForm，否则会创建独立的表单上下文，无法读取主表单的defaultValues。
• 所有输入控件的name属性必须与主表单defaultValues中的键完全匹配，才能正确读取和同步默认值。
• 自定义组件或复杂控件优先使用Controller绑定，能更灵活处理受控组件的状态同步逻辑。

内容的提问来源于stack exchange，提问作者Pikk