使用打字稿自定义反应日期选择器

Question

我正在尝试按照文档中的说明创建一个自定义日期选择器，并且在很长一段时间后我能够做到这一点，但我仍然收到一条错误，提示“无法为功能组件提供引用。尝试访问此引用将失败.你的意思是使用 React.forwardRef() 吗？” 我在我的项目中使用打字稿。

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

是的，您需要使用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} />}
    />
  )
}