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

ztmd8pv5  于 2023-04-27  发布在  Ionic
关注(0)|答案(2)|浏览(118)

我正在开发一个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"

任何帮助都将非常感激!

wdebmtf2

wdebmtf21#

您需要使用Controller而不是register来 Package <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>
  )}
/>

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

jjjwad0x

jjjwad0x2#

您可以避免将控制器与以下各项配合使用:

<div>
    <input {...register("radio")} type="radio" value="A" />
    <input {...register("radio")} type="radio" value="B" />
    <input {...register("radio")} type="radio" value="C" />
</div>

参见:https://react-hook-form.com/api/useform/register/#example

相关问题