0
282
ViewsReact-hook-form: no se pudo implementar con éxito el componente MUI Select
Estoy tratando de crear un contenedor alrededor del componente MUI Select, y aunque encontré algunas soluciones que parecen estar muy cerca de funcionar. Simplemente no lo hacen y no estoy seguro de por qué.
Adjunto una imagen del error más el código relacionado. ¿Alguna idea de cómo evitar esto?
plantilla de origen que estoy tratando de usar
mensaje de error
mi controlador
<FormControl> <Controller name="sourceLanguage" rules={{ required: 'this is required' }} control={control} defaultValue={sourceLanguage} as={ <Select> <MenuItem value="">None</MenuItem> <MenuItem value="fr">French</MenuItem> <MenuItem value="es">Spanish</MenuItem> </Select> } /> </FormControl>gancho useForm
const { control, handleSubmit, getValues, formState: { errors }, } = useForm<dynamicFormState>({});estado relacionado
export interface dynamicFormState { title: string; description: string; contentId: string; sourceURL: string; sourceLanguage: string; targetLanguage: string; author?: IYoutubeAuthor; content?: IYoutubeContent; }
·
Juan Pablo Isaza
1 answers
Answer question0
Parece que estás mezclando las versiones 6 y 7 de RHF. Su componente <Controller /> usa la sintaxis v6 con as prop, mientras que probablemente esté usando v7 como una dependencia en su proyecto (por lo tanto, el error de TS señala que as no es una propiedad de <Controller /> ). Escriba su <Controller /> usando el accesorio de render en lugar de as debería corregir el error.
<FormControl> <Controller name="sourceLanguage" rules={{ required: 'this is required' }} control={control} defaultValue={sourceLanguage} render={({ field }) => ( <Select {...field}> <MenuItem value="">None</MenuItem> <MenuItem value="fr">French</MenuItem> <MenuItem value="es">Spanish</MenuItem> </Select> )} /> </FormControl>
·
Juan Pablo Isaza
Report
Answer question