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

【问题标题】：Custom react datepicker with typescript使用打字稿自定义反应日期选择器
【发布时间】：2020-04-30 02:53:21
【问题描述】：

我正在尝试按照文档中的说明创建自定义日期选择器，经过很长时间我能够做到，但我仍然收到一条错误消息，提示“无法为函数组件提供参考。尝试访问此ref 会失败。你的意思是使用 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;

【问题讨论】：

标签： reactjs typescript react-datepicker

【解决方案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} />}
    />
  )
}

【讨论】：

【解决方案2】：

如果我正确理解您的问题。为了导出您的自定义 react-datepicker 函数。您可以使用“react-datepicker”中的 { ReactDatePickerProps } 类型，并且可以根据需要自定义此道具类型。这是 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；

【讨论】：