使用typescript自定义react日期选择器

Question

我正试图按照文档中的说明创建一个自定义日期选择器，经过很长一段时间，我终于可以创建了，但我仍然收到一个错误，上面写着"函数组件不能被赋予ref。访问这个ref的尝试会失败。你是说要使用React.forwardRef((吗？"我在项目中使用的是typescript。

import DatePicker from "react-datepicker";
import React, { useContext, useState } from "react";
import "react-datepicker/dist/react-datepicker.css"; 

const Feed: React.FC = () => { 
const [startDate, setStartDate] = useState();
const ExampleCustomInput = ({
value,
onClick,
}: {
value?: any;
onClick?: any;
}) => (
<DateFilter className="example-custom-input" onClick={onClick}>
{value || "Escolha uma data"}
<CalendarIcon />
</DateFilter>
);

return (
<Container>
<LeftContent>
<NewPost onClick={openModal}>+ Novo post</NewPost>
<DatePicker
dateFormat="dd/MM/yyyy"
selected={startDate}
onChange={(date: any) => setStartDate(date)}
customInput={<ExampleCustomInput />}
/>
</LeftContent>
</Container>
);
};

export default Feed;

Answer 1

如果我正确理解你的问题。为了导出您的自定义反应日期选择器函数。您可以使用类型{ReactDatePickerProps}；react datepicker"；你可以根据自己的需要定制这种道具类型。下面是CustomDatePicker示例来说明这个想法。

type CustomDatePickerProps = ReactDatePickerProps & {t: Translate;};
const CustomDatePicker: React.FC<CustomDatePickerProps> = (props) => {
const { t, ...rest } = props;
return (
<ReactDatePicker
renderCustomHeader={({
date,
increaseYear,
decreaseYear,
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
nextMonthButtonDisabled,
prevYearButtonDisabled,
nextYearButtonDisabled,
}) => (
<div className="flex justify-between items-center px-3 py-2 ">
<div className="flex">
<button
onClick={decreaseYear}
disabled={prevYearButtonDisabled}
className="text-textSecondary flex"
>
<LeftIcon className="w-4 h-4" />
<LeftIcon className="w-4 h-4 -ml-3" />
</button>
<button
onClick={decreaseMonth}
disabled={prevMonthButtonDisabled}
className="text-textSecondary  ml-1"
>
<LeftIcon className="w-4 h-4" />
</button>
</div>
<div className="text-base font-bold">{`${numberToMonth(
date.getMonth(),
t
)} ${date.getFullYear()}`}</div>
<div className="flex">
<button
onClick={increaseMonth}
disabled={nextMonthButtonDisabled}
className="text-textSecondary"
>
<LeftIcon className="w-4 h-4 transform rotate-180" />
</button>
<button
onClick={increaseYear}
disabled={nextYearButtonDisabled}
className="text-textSecondary flex ml-1"
>
<LeftIcon className="w-4 h-4 transform rotate-180" />
<LeftIcon className="w-4 h-4 transform rotate-180 -ml-3" />
</button>
</div>
</div>
)}
{...rest}
/>

)；}；

导出默认的CustomDatePicker；

Answer 2

是的，您需要使用React.forwardRef来解决此问题。这是我为解决这个问题而想出的代码：

import React, { FunctionComponent } from 'react'
import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
const ReactDatePickerInput = React.forwardRef<
HTMLInputElement,
React.DetailedHTMLProps<
React.InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
>
>((props, ref) => <input ref={ref} {...props} />)
ReactDatePickerInput.displayName = 'ReactDatePickerInput'
export const FormDatePicker: FunctionComponent<ReactDatePickerProps> = (props) => {
return (
<ReactDatePicker
{...props}
// @see https://github.com/Hacker0x01/react-datepicker/issues/862#issuecomment-534736357
customInput={<ReactDatePickerInput label={label || ''} name={name} />}
/>
)
}