React表单中单选按钮控制的条件渲染else分支失效如何解决？

你写的三元条件渲染逻辑本身没有语法错误，分支不生效的核心原因是单选按钮的选中状态没有同步到你判断用的fatherOccupation变量上，结合你代码里用了react-hook-form的register方法，给出两个对应修复方案： #

方案1：用React.useState自行管理单选状态 #

适合你需要单独维护这个字段状态的场景：

1. 声明状态和change处理函数

import { useState } from 'react';

// 声明状态，可根据需求设置初始值
const [fatherOccupation, setFatherOccupation] = useState('service');

// 单选框change事件处理逻辑
const handleFatherOccupation = (e) => {
  setFatherOccupation(e.target.value);
}

2. 你现有单选框的代码不需要改动，保持现有onChange和checked绑定即可。

方案2：全量使用react-hook-form管理状态 #

适合所有表单字段都交给react-hook-form管理的场景，不需要单独写useState和change处理函数：

1. 先从react-hook-form里取watch方法，用于监听字段值：

import { useForm } from 'react-hook-form';

const { register, watch } = useForm({
  defaultValues: {
    fatherOccupation: 'service' // 设置默认选中值
  }
});

// 监听fatherOccupation字段的实时值
const fatherOccupation = watch('fatherOccupation');

2. 调整单选框的代码，加上register绑定，删除原有自定义的checked和onChange：

<div className="row">
  <div className="col-md-3">
    <input 
      type= "radio"
      id= "fatherService"
      value = "service"
      {...register("fatherOccupation")}
    />
    <label htmlFor="fatherService">Service</label>
  </div>
  <div className="col-md-6">
    <input 
      type= "radio"
      id= "fatherSelfEmployed"
      value = "selfEmployed"
      {...register("fatherOccupation")}
    />
    <label htmlFor="fatherSelfEmployed">Self Employed</label>
  </div>  
</div>

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