我有带有控制器的反应钩子形式，是的作为验证 材料 UI 选择在选择某些内容后保持红色并且不会消失

Question

我让TextField工作，现在如果没有进行选择，Material UI Select将变为红色，但在进行选择后保持红色，并且不允许表单提交。我使用Yup作为验证库。也许我一直使用错误的Yup类型，我尝试了String和array，但我无法使其工作。

import {
makeStyles,
Box,
Select,
FormControl,
InputLabel,
MenuItem,
Typography,
} from "@material-ui/core";
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers'
import { useForm, Controller } from "react-hook-form";
const FormFields = ({ typeOfInquiry, typeOfProviderSupplier, feedbackform }) => {

const schema = yup.object().shape({

typeofInquiry: yup.array().nullable().required(),

});
const { handleSubmit, control, reset, errors } = useForm();
return (

<Controller
style={{ minWidth: 220 }}
name="typeofInquiry"
render ={({ field: {  ...field }, fieldState })=>{
console.log(props)
return  ( <Select  {...field} >

{typeOfInquiry.map((person) => (
<MenuItem key={person.value} value={person.value} >
{person.label}
</MenuItem>
))}
</Select>
)
}}
control={control}
defaultValue=" "
/> 
<Typography className={classes.red}>{errors.typeofInquiry?.message}</Typography>
</FormControl>
</form>
);
}

Answer 1

您必须将ref传递给TextField组件。

下面是一个工作示例
https://codesandbox.io/s/exciting-pateu-3n0i9

您应该对Select执行类似的操作
MUI的一些示例：https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5?file=/src/Mui.js