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

Question

我正在开发 Ionic React App，我想使用 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;

包.json

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

任何帮助将非常感激！

标签： reactjsionic-frameworkyupreact-hook-form

Answer 1

您需要使用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，因为该函数的第一个参数已经提供了所有已注册的表单值。