>
然后验证表单？
从“React”导入React,{useState,useEffect}；
从“yup”导入*为yup；
const formSchema=yup.object（）。shape（{
ID：yup.string（）.required（“required”）,
姓名：yup
.string()
.min(2, "You name should have 2 characters")
.required("You don't have a name?"),
类型：yup
.string()
.min(3, "Must be at least 3 characters")
.required("Required"),
值：yup.string（）.required（“required”）,
}）；
const PizzaForm=（）=>{
//管理表单的状态
const[formState,setFormState]=useState（{
id: "",
name: "",
type: "",
value: "",
addOns: "",
}）；
const[errors,setErrors]=useState（{
id: "",
name: "",
type: "",
value: "",
addOns: "",
}）；
常量[buttonDisabled,setButtonDisabled]=Ustate（true）；
const validate=(e)=>{
常量值=
e.target.type===“checkbox”？e.target.checked：e.target.name；
yup
.reach(formSchema, e.target.name)
.validate(e.target.value)
.then((valid) => {
setErrors({
...errors,
[e.target.name]: "",
});
})
.catch((err) => {
setErrors({
...errors,
[e.target.name]: err.errors[0],
});
});
}；
//formSubmit函数
const formSubmit=(e)=>{
e.preventDefault();
console.log("form submitted!", formState);
}；
//onChange函数
const onChange=(e)=>{
e.persist();
validate(e); /*something wrong here, crashes when a radio is selected*/
console.log(e.target.value, e.target.checked);
const value = e.target.type === "radio" ? e.target.checked :
e.target.value;
setFormState({ ...formState, [e.target.name]: value });
}；
//handleChange函数
常量handleChange=(e)=>{
e.persist();
setFormState({
...formState,
addOns: [formState.addOns, e.target.value],
});
}；
//使用效果函数
useEffect(()=>{
formSchema.isValid(formState).then((valid) => {
setButtonDisabled(!valid);
});
},[formState])；
返回（
<div>
<form onSubmit={formSubmit}>
<label htmlFor="name">
Name Your Pizza:
<input
type="text"
name="name"
id="name"
placeholder="Save for future orders!"
value={formState.name}
onChange={onChange}
/>
{errors.name.length > 0 ? (
<p className="error">{errors.name}</p>
) : null}
</label>
<h1> Build Your Own Pizza! </h1>
<label htmlFor="size">
<h3> What Size Pizza? </h3>
Pizza Size:
<select id="psize" name="psize">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extralarge">Extra Large</option>
</select>
</label>
<h3> Select Your Sauce: </h3>
<label htmlFor="redsauce" className="redsauce">
<input
type="radio"
name="redsauce"
value={formState.name}
onChange={onChange}
/>
Original Red
</label>
<label htmlFor="garlic" className="garlic">
<input
type="radio"
name="garlic"
value={formState.name}
onChange={onChange}
/>
Garlic Ranch
</label>
<label htmlFor="bbq" className="bbq">
<input
type="radio"
name="bbq"
value={formState.name}
onChange={onChange}
/>
BBQ Sauce
</label>
<label htmlFor="spinach" className="spinach">
<input
type="radio"
name="spinach"
value={formState.name}
onChange={onChange}
/>
Spinach Alfredo
</label>
<h3> Select Your Toppings: </h3>
<label htmlFor="toppings">
Toppings: Plain
<input
id="toppings1"
type="checkbox"
name="addOns"
value={formState.name}
onChange={handleChange}
/>
<h3> Select Your Cheese: </h3>
Chedder
<input
id="toppings2"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Cheese
<input
id="toppings3"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Three Cheese
<input
id="toppings4"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
ExtraCheese
<input
id="toppings5"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
<h3> Select Your Meat: </h3>
Pepporoni
<input
id="toppings6"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Sausage
<input
id="toppings7"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Canadian Bacon
<input
id="toppings8"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Spicy Italian Sausage
<input
id="toppings9"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
GrilledChicken
<input
id="toppings10"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
<h3> Select Other Toppings: </h3>
Onions
<input
id="toppings11"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Green Peppers
<input
id="toppings12"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Diced Tomatoes
<input
id="toppings13"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Black Olives
<input
id="toppings14"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Roasted Garlic
<input
id="toppings15"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Artichoke Hearts
<input
id="toppings16"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
Pineapple
<input
id="toppings17"
type="checkbox"
name="addOns"
onChange={handleChange}
/>
</label>
<h3>Any Special Instructions?</h3>
<label htmlFor="instructions">
Special Instructions:
<textarea name="instructions" />
</label>
<button disabled={buttonDisabled}>Submit</button>
</form>
</div>
）；}；
导出默认PizzaForm；
const formSchema = yup.object().shape({
id: yup.string().required("Required"),
name: yup.string().min(2, "You name should have 2 characters")
.required("You don't have a name?"),
type: yup.string().min(3, "Must be at least 3 characters").required("Required"),
value: yup.string().required("Required"),
});
您的模式如下所示。我在代码中修正了这个错误，方法是添加属性yup正在抱怨，并将它的类型定义为错误抛出的类型。在您的例子中，它是object类型的“菠菜
因此向yup模式添加以下行：
spinach: yup.object()
如果您认为它是必需的，请将其设置为必需
spinach: yup.object().required("Required"),
您的表单包含此字段，而yup架构不包含此字段。
通常我没有注意到它需要在模式中列出所有属性名。当我在两个模式之间切换以提交完整对象或草稿版本时，我出现了这个错误。草案没有列出yup抱怨的一些房产。
