Question

我正在尝试按照文档中的说明创建自定义日期选择器，但经过很长时间之后，我仍然可以执行此操作，但是仍然收到错误消息，提示“无法为功能组件提供引用。尝试访问此日期选择器ref将失败。您是要使用React.forwardRef（）吗？”我在项目中使用打字稿。

public interface AppointmentViewRepository extends JpaRepository<AppointmentView,Integer> {}

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} />}
    />
  )
}

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

1 个答案: