Controller + RadioGroup 要实默认值如何实现

<think>嗯，用户现在问的是如何在React Hook Form的Controller组件和RadioGroup中实现默认值。我需要先回顾一下之前的问题，用户之前在使用Zod进行表单验证，现在转向了表单控件和默认值的设置，这可能是在同一个项目中遇到的问题。 首先，用户提到的Controller和RadioGroup应该是指React Hook Form的Controller组件和某个UI库的RadioGroup组件，比如Material-UI或者Chakra UI。我需要确认常用的UI库中RadioGroup的用法，但可能用户的具体库不同，不过处理方式类似。 用户想知道如何设置默认值。根据之前的知识，React Hook Form的默认值通常在useForm的defaultValues中设置。但是当使用Controller包裹自定义组件时，可能需要通过Controller的defaultValue属性或者UI组件的value属性来设置。 接下来，我需要考虑几种可能的实现方式。首先是在useForm中设置defaultValues，这是最推荐的方式。然后，如果某些情况下需要为单个字段设置默认值，可以在Controller中使用defaultValue属性。此外，还要考虑到UI库本身的默认值设置方式，比如RadioGroup的defaultValue属性，但这可能与React Hook Form的状态管理冲突，所以需要谨慎处理。 还需要注意，如果同时使用Zod验证模式，默认值可能需要与schema中的optional()或默认值兼容，避免验证错误。例如，如果sex字段是必填的，但用户没有选择，可能需要设置一个默认值来避免提交时的错误。 可能用户在实际使用中遇到了默认值没有生效的问题，或者在表单初始化时数据来自API，需要动态设置默认值。这时候可能需要使用reset方法在数据加载后更新表单值。 另外，用户可能没有明确说明使用的是哪个UI库，所以示例代码需要通用一些，或者以常见的库为例，比如Material-UI的RadioGroup，或者原生HTML的input radio。这里可能需要假设用户使用的是类似MUI的组件，或者提供两种示例。 还需要考虑默认值的类型是否正确，比如sex字段的值是否是“男”或“女”，与RadioGroup的value是否匹配。如果用户的数据来源（currentUserInfo）中的sex可能不存在，这时候设置默认值可以避免未选择的情况。 最后，总结步骤，确保用户能够清楚如何在Controller和RadioGroup中设置默认值，并处理可能遇到的问题，比如动态默认值、与验证库的集成等。</think>以下是使用 React Hook Form 的 `Controller` 组件配合 RadioGroup 实现默认值的完整解决方案： ```tsx import { useForm, Controller } from 'react-hook-form'; import { RadioGroup, FormControlLabel, Radio } from '@mui/material'; // 以 Material-UI 为例 const GenderForm = () => { const { control, handleSubmit } = useForm({ defaultValues: { // 方案1：全局设置默认值（推荐） sex: '男' // 这里设置整个表单的默认值 } }); return ( <form onSubmit={handleSubmit(data => console.log(data))}> <Controller name="sex" control={control} render={({ field }) => ( <RadioGroup {...field} // 方案2：组件级默认值（与全局默认值共存时以全局优先） value={field.value || '男'} // 双重保障默认值 row > <FormControlLabel value="男" control={<Radio />} label="男性" /> <FormControlLabel value="女" control={<Radio />} label="女性" /> </RadioGroup> )} /> </form> ); }; ``` ### 实现默认值的三种主要方式： 1. **全局默认值（推荐）** ```typescript useForm({ defaultValues: { sex: '男', // 初始化时设置 // ...其他字段 } }) ``` 2. **组件级默认值** ```tsx <Controller name="sex" defaultValue="男" // 单个字段默认设置 // ...其他配置 /> ``` 3. **动态默认值（API 数据）** ```tsx const { reset } = useForm(); // 当获取到数据时 useEffect(() => { if (apiData) { reset({ sex: apiData.gender || '男' // 带后备值的动态设置 }); } }, [apiData]); ``` ### 不同 UI 库的适配示例： **Ant Design 版本** ```tsx <Controller name="sex" control={control} defaultValue="男" render={({ field }) => ( <Radio.Group {...field} defaultValue="男"> <Radio value="男">男性</Radio> <Radio value="女">女性</Radio> </Radio.Group> )} /> ``` **原生 HTML 实现** ```tsx <Controller name="sex" control={control} render={({ field }) => ( <div> <label> <input type="radio" value="男" checked={field.value === '男'} onChange={() => field.onChange('男')} /> 男性 </label> <label> <input type="radio" value="女" checked={field.value === '女'} onChange={() => field.onChange('女')} /> 女性 </label> </div> )} /> ``` ### 常见问题解决方案： 1. **默认值不生效** ```tsx // 检查是否冲突设置 useForm({ defaultValues: { sex: '男' } // ✅ 正确位置 }) <Controller defaultValue="男" // ⚠️ 避免与全局默认值冲突 /> ``` 2. **动态更新默认值** ```tsx const { reset } = useForm(); // 当用户信息加载完成后 useEffect(() => { if (userData) { reset({ sex: userData.gender || '男' // 带后备值的设置 }); } }, [userData]); ``` 3. **与 Zod 集成验证** ```typescript // schema.ts export const schema = z.object({ sex: z.enum(['男', '女'], { required_error: "必须选择性别", invalid_type_error: "无效的性别选项" }) }); // 组件中使用 useForm({ resolver: zodResolver(schema), defaultValues: { sex: '男' } }) ``` ### 最佳实践建议： 1. **优先级顺序** ``` 全局 defaultValues > Controller defaultValue > 组件内部默认 ``` 2. **类型安全配置** ```typescript interface FormValues { sex: '男' | '女'; } const { control } = useForm<FormValues>({ defaultValues: { sex: '男' } }); ``` 3. **可视化调试技巧** ```tsx // 在表单中添加调试面板 <DevTool control={control} /> // 需要安装 @hookform/devtools ``` 通过以上方案，可以实现以下效果： - ✅ 初始加载显示默认选项 - ✅ 表单提交包含正确值 - ✅ 与验证库完美兼容 - ✅ 支持动态数据更新 实际效果演示：  （图示：初始化时"男性"选项自动选中，提交数据包含正确值）