ReactJS+Formik注册表单单选按钮致提交失效问题排查

看起来你的问题根源在于自定义单选组件的name属性冲突，加上可能缺少字段验证和初始值设置，导致Formik认为表单无效，从而阻止了onSubmit的触发。下面一步步帮你解决：

1. 移除自定义单选组件中的手动name属性 #

你在male和female组件里手动写了name="gender"，但Formik的Field组件已经会自动为表单元素注入name属性，这会导致重复绑定，让Formik无法正确跟踪单选按钮的选中状态。修改你的组件：

// 移除手动设置的name="gender"
const male = props => ( <input type="radio" value="male" {...props} /> );
const female = props => ( <input type="radio" value="female" {...props} /> );

2. 确保initialValues包含gender字段的初始值 #

Formik需要初始值来跟踪字段状态，如果你的initialValues里没有gender，或者值为空且未设置验证，可能会导致表单状态异常。检查你的state初始化：

// 在组件的constructor或state初始化中添加gender
state = {
  initialValues: {
    email: '',
    password: '',
    gender: '' // 可以设为空字符串，或者默认选中'male'
  }
};

3. 添加Yup验证规则（关键！） #

Formik默认会阻止无效表单的提交，如果你没有为gender设置必填验证，或者表单存在其他未通过的验证，onSubmit就不会触发。添加完整的验证Schema：

// 导入Yup后，定义验证规则
const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email format').required('Email is required'),
  password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
  gender: Yup.string().required('Please select a gender')
});

然后把这个Schema传给Formik组件：

<Formik
  initialValues={initialValues}
  validationSchema={validationSchema} // 新增这一行
  onSubmit={( { email, password, gender }, { setStatus, setSubmitting } ) => {
    // ... 你的提交逻辑
  }}
  // ... 其他属性
>

4. 修复onSubmit中的语法错误 #

你的提交逻辑里有一个明显的语法错误，这也可能导致提交失败：

// 原错误代码
const { from } = this.props.location.state || { from: { pathname: "/" } `};`
// 修正后
const { from } = this.props.location.state || { from: { pathname: "/" } };

验证修复效果 #

做完以上修改后，单选按钮的状态会被Formik正确跟踪，表单验证通过后点击Create按钮，onSubmit就会正常触发了。如果还有问题，可以打开浏览器控制台查看Formik的表单状态（比如在render里打印values、errors），确认gender字段是否被正确更新。

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