英文:
Disable button presses when required fields are empty in react-hook-form
问题
要实现在以下代码中只有在"Name"和"State"都为空时禁用按钮，您可以使用以下方法。换句话说，只有在输入了"name"和"state"时，无论"email"是否为空，按钮才能被点击。
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
type FormValues = {
name: string;
state: string;
email: string;
};
export default function App() {
const { register, handleSubmit, watch, formState } = useForm<FormValues>();
const { isDirty, isValid } = formState;
const onSubmit: SubmitHandler<FormValues> = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("name")} />
<input {...register("state")} />
<input type="email" {...register("email")} />
<input type="submit" disabled={!isDirty || !isValid} />
</form>
);
}
这里，我们使用isDirty来检查表单是否被修改过，以及isValid来检查表单是否有效。只有在"Name"和"State"都不为空且表单被修改过时，按钮才会可用。
英文:
I would like to know how to disable a button only when both Name and State in the following code are empty.In other words, I would like to know how to make it so that the button can be pressed only when both name and state are entered, regardless of whether the email is null or not.
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
type FormValues = {
name: string;
state: string;
email: string;
};
export default function App() {
const { register, handleSubmit } = useForm<FormValues>();
const onSubmit: SubmitHandler<FormValues> = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("name")} />
<input {...register("state")} />
<input type="email" {...register("email")} />
<input type="submit" />
</form>
);
}
答案1
得分: 1
你可以通过检查formState对象的isValid属性来实现这一点。当isValid为false时禁用按钮，并在register方法中为name和state设置required属性为true。这样，只要name或state为空，按钮就会被禁用，不管电子邮件输入是什么。
以下是一个可工作的示例：
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
type FormValues = {
name: string;
state: string;
email: string;
};
export default function App() {
const { register, handleSubmit, formState } = useForm<FormValues>();
const onSubmit: SubmitHandler<FormValues> = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("name", {required: true})} />
<input {...register("state", {required: true})} />
<input type="email" {...register("email")}/>
{/* 如果Name和State都为空，则禁用输入按钮 */}
<input type="submit" disabled={!formState.isValid} />
</form>
);
}
英文:
You can achieve that with checking the property isValid of the formState object. Disable the button when isValid is false and set the required property within the register method to true for name and state. The button is disabled this way whenever name or state are empty, regardless of the email input.
Here is a working version:
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
type FormValues = {
name: string;
state: string;
email: string;
};
export default function App() {
const { register, handleSubmit, formState } = useForm<FormValues>();
const onSubmit: SubmitHandler<FormValues> = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("name", {required: true})} />
<input {...register("state", {required: true})} />
<input type="email" {...register("email")}/>
{/* Disable input button if both Name and State are empty */}
<input type="submit" disabled={!formState.isValid} />
</form>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论