Я создаю многоразовый входной компонент Select, используя пользовательский интерфейс материала (MUI) и реагирующую кунгунс. Я хочу, чтобы компонент: < /p>
полностью контролировался с использованием контроллера React-hook-форма. < /P>
Принять динамические параметры, передаваемые через реквизит. < /P>
Реализация: < /p>
import { JSX } from "@emotion/react/jsx-dev-runtime";
import {
Select,
FormLabel,
FormHelperText,
FormControl,
MenuItem,
} from "@mui/material";
import { Controller, useFormContext } from "react-hook-form";
export function RHFCustomSelect({
name,
options,
outerLabel,
styleMenu,
placeholder,
fullWidth = true,
...others
}: any): JSX.Element {
const { control } = useFormContext();
const menuProps: any = {
PaperProps: {
sx: {
marginTop: "10px",
},
},
};
return (
(
{outerLabel && (
{outerLabel}
)}
{placeholder ?? "Select"}
{options?.map(({ id, label, value }: any) => (
{label}
))}
{Boolean(error) && {error?.message}}
)}
/>
);
}
Подробнее здесь: https://stackoverflow.com/questions/795 ... -hook-form
