如何通过带有 YUP 的单选按钮验证第一个数组是否没有第二个数组的值

Question

我选择第一个单选按钮来呈现第一个带颜色的单选按钮数组，然后选择其中一种颜色，然后选择第二个单选按钮来呈现第二个带颜色的单选按钮数组。如果我选择的颜色从第一个数组不包括第二个数组，如何显示错误?

CodeSandbox: https://codesandbox.io/s/focused-microservice-l4q3re?file=/src/App.tsx

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
export default function App() {
const schema = yup.object().shape({
choose: yup.string().typeError("select first or second").required(),
color: yup
.string()
.typeError("selected color doesn't include of this array")
.required("select color")
});
const {
register,
formState: { errors },
handleSubmit
} = useForm({
resolver: yupResolver(schema)
});
const onSubmit = (data: any) => {
console.log(data);
};
const onError = (error: any) => {
console.log(error);
};
let colors = [
["black", "white", "pink"],
["black", "red", "blue"]
];
const [select, setSelect] = useState<number>();
return (
<form onSubmit={handleSubmit(onSubmit, onError)}>
<label>
<input
type="radio"
onClick={() => setSelect(0)}
value={"first"}
{...register("choose")}
/>
first
</label>
<label>
<input
type="radio"
onClick={() => setSelect(1)}
value={"second"}
{...register("choose")}
/>
second
</label>
<p> {errors && errors.choose?.message}</p>
<div>
{select != null &&
colors[select].map((color: any, i: number) => (
<label key={i}>
<input
type="radio"
value={color}
{...register("color")}
/>
{color}
</label>
))}
{select != null && <p> {errors && errors.color?.message}</p>}
</div>
<button type="submit">Add</button>
</form>
);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

App.tsx的最终代码
将此粘贴到App.tsx中的给定沙箱中，查看结果

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
export default function App() {
const schema = yup.object().shape({
choose: yup.string().typeError("select first or second").required(),
color: yup
.string()
.typeError("selected color doesn't include of this array")
.required("select color")
});
const {
register,
formState: { errors },
handleSubmit
} = useForm({
resolver: yupResolver(schema)
});
const onSubmit = (data: any) => {
console.log(data);
};
const onError = (error: any) => {
console.log(error);
};
let colors = [
["black", "white", "pink"],
["black", "red", "blue"]
];
const [select, setSelect] = useState<number>();
const [validationState, setValidationState] = useState<boolean>();
const onClickChildRadio = (value: string) => {
const secondArray:string[] = colors[1];
const isExistInSecondArray = secondArray.includes(value);
setValidationState(isExistInSecondArray);
};
return (
<form onSubmit={handleSubmit(onSubmit, onError)}>
<label>
<input
type="radio"
onClick={() => setSelect(0)}
value={"first"}
{...register("choose")}
/>
first
</label>
<label>
<input
type="radio"
onClick={() => setSelect(1)}
value={"second"}
{...register("choose")}
/>
second
</label>
<p> {errors && errors.choose?.message}</p>
<div>
{select != null &&
colors[select].map((color: any, i: number) => (
<label key={i}>
<input
onClick={(e) => onClickChildRadio(e.target.value)}
type="radio"
value={color}
{...register("color")}
/>
{color}
</label>
))}
{select != null && <p> {errors && errors.color?.message}</p>}
</div>
<button type="submit">Add</button>
<p>
Validate :
{validationState
? "Value exist in second array"
: "Value doesn't exist in second array"}
</p>
</form>
);
}