如何在 React Hook Form v7 中使用单选按钮？

问题描述

我正在开发一个 Ionic React 应用程序，我想使用 React Hook Form 和 Yup Resolvers 来提交表单。我的表单包含一个单选按钮和两个其他输入。

我在使用单选按钮时遇到了困难。我应该如何编写它以存储其值并提交？ 您可以在下面找到我的组件。即使我选择了其中一个单选按钮，也不会存储任何值。

import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const validationSchema = yup.object().shape({
  firstName: yup.string().required("First name is required"),lastName: yup.string().required("Last name is required"),});

const AddUser = () => {

  const history = useHistory();
  const [type,seType] = useState("");
  const [firstName,setFirstName] = useState("");
  const [lastName,setLastName] = useState("");
 
const {
    register,handleSubmit,formState: { errors },getValues,} = useForm({
    mode: "onChange",resolver: yupResolver(validationSchema),});

  const onSubmit= () => {
   
    var data = {
            type: getValues("type"),firstName: getValues("firstName"),lastName: getValues("lastName"),};

    axios
      .post("/add-user",data)
      .then((response) => {
        return response.data;
      })
      .catch((error) => {
        setMessage(
          `You are already registered`    
        );
        setIserror(true);
       
      });
  };

  return (
    <React.Fragment>
   
      <IonPage className="ion-page" id="main-content">
     
        <IonContent className="ion-padding">
          <div>
            <h2>Add New User</h2>
            
            <form onSubmit={handleSubmit(onSubmit)}>
              
              <IonList>
                <IonRadioGroup
                 {...register("type")}
                >
                  <IonItem>
                    <IonLabel>Type 2</IonLabel>
                    <IonRadio value="2" slot="start" />
                  </IonItem>

                  <IonItem>
                    <IonLabel>Type 4</IonLabel>
                    <IonRadio slot="start" value="4" />
                  </IonItem>

                  <IonItem>
                    <IonLabel>Type 6</IonLabel>
                    <IonRadio slot="start" value="6" />
                  </IonItem>
                </IonRadioGroup>
              </IonList>
               
               <IonItem>
                <IonLabel position="floating">First name*</IonLabel>
                <IonInput
                {...register("firstName")}
                ></IonInput>
              </IonItem>

 
              <IonItem>
                <IonLabel position="floating">Last name*</IonLabel>
                <IonInput
                {...register("lastName")}
                ></IonInput>
              </IonItem>

              <br />
              <IonButton
                type='submit'
              >
                create
              </IonButton>
            </form>
          </div>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default AddUser;

package.json

"@hookform/resolvers": "^2.4.0","react-hook-form": "^7.1.1","yup": "^0.32.9"

任何帮助将不胜感激！

解决方法

您需要使用 Controller 而不是 register 来包装 <IonRadioGroup>，因为 register 仅适用于简单的离子组件，例如 <IonInput />。

<Controller
  control={control}
  name="type"
  render={({ field: { onChange,value } }) => (
    <IonList>
      <IonRadioGroup
        value={value}
        onIonChange={({ detail: { value } }) => onChange(value)}
      >
        <IonItem>
          <IonLabel>Type 2</IonLabel>
          <IonRadio value="2" slot="start" />
        </IonItem>
        <IonItem>
          <IonLabel>Type 4</IonLabel>
          <IonRadio slot="start" value="4" />
        </IonItem>
        <IonItem>
          <IonLabel>Type 6</IonLabel>
          <IonRadio slot="start" value="6" />
        </IonItem>
      </IonRadioGroup>
    </IonList>
  )}
/>

我还删除了 getValues 方法中的 onSubmit 调用，因为此函数的第一个参数已经提供了所有注册的表单值。