我正在尝试使用MUI Datepicker和React Hook Form创建可重用组件
但在父组件上获得了Type '{ control: Control<FieldValues, object>; name: string; }' is missing the following properties from type 'DatePickerProps<unknown>': onChange, value, renderInput ts(2739)
我现在卡住了:
import { DatePickerProps } from "@mui/lab";
import { ComponentProps } from "react";
import { Control, Controller } from "react-hook-form";
import DateInputComponent from "./DateInputComponent";
type Props = {
name: string;
control: Control;
errors?: {
[x: string]: any;
};
rules?: any;
defaultValue?: any;
} & ComponentProps<typeof DateInputComponent>;
type ExtendedProps = Props & DatePickerProps;
const ControlledDateInput = ({
name,
control,
errors,
rules,
defaultValue,
...props
}: ExtendedProps) => {
return (
<Controller
control={control}
name={name}
rules={rules}
defaultValue={defaultValue}
render={({ field: { onChange, onBlur, value } }) => (
<DateInputComponent
{...props}
onChange={onChange}
onBlur={onBlur}
value={value}
error={!!errors?.[name]}
helperText={
errors?.[name] ? errors?.[name]?.message || "Invalid field" : ""
}
/>
)}
/>
);
};
export default ControlledDateInput;
最好去下面的沙箱:https://codesandbox.io/s/affectionate-drake-5bjbl?file=/src/App.tsx
请帮帮忙!!!
2条答案
按热度按时间4si2a6ki1#
DatePickerProps
类型需要2个泛型(在您发布问题时,它只需要一个泛型)。您需要调用DatePickerProps<unknown, unknown>
或DatePickerProps<Date, Date>
等类型。k4ymrczo2#
在我的例子中,
@mui/lab
中的DatePickerProps
没有声明一个正确的类型,我从@mui/x-date-pickers
中导入它,因为我使用x-date-pickers包来呈现我的自定义组件。