带有 react-hook-form 验证的单选按钮

Question

我创建了一个带有单选按钮的表单并使用反应钩子表单完成了验证，但是在控制台中显示日志数据时，它在选择单选按钮上始终显示“打开”。

<div className="">
              <label htmlFor="" className=" ">
                US Citizen?
              </label>
              <div className="">
                <div className="radio-container">
                  <input type="radio" name="radio" {...register("usCitizen")} />
                  <label>Yes</label>
                </div>

                <div className="radio-container">
                  <input type="radio" name="radio" {...register("usCitizen")} />
                  <label>No</label>
                </div>
              </div>
            </div>

Answer 1

我认为您需要添加一个处理 onclick 事件的 function 并添加一个可以将值设置为 true 或 false 的 useState 我不确定语法，但它非常像这样：

const [radio, setRadio] = useState(false);

function handleClick(event){
    const [val] = event.target.value;

    setRadio(()=>{
    if (val === true){
       return(false)
    }
    else{
    return(true)
    }
}

}
<input type="radio" onclick={handleClick} value={radio}> 

Answer 2

使用提交输入类型。 （处理提交）

<form onSubmit={handleSubmit(onSubmit)}>
                <div className="">
                    <label htmlFor="" className=" ">US Citizen?</label>
                        <div className="">
                            <div className="radio-container">
                                <input type="radio" name="radio" value="yes" {...register("usCitizen")} />
                           <label>Yes</label>
                        </div>
        
                        <div className="radio-container">
                          <input type="radio" name="radio" value="no" {...register("usCitizen")} />
                          <label>No</label>
                        </div>
                      </div>
                    </div>
       <input type="submit" value="Submit" />
</form>