reactjs 从Ant Design导入RangeValue类型

sh7euo9m  于 2023-08-04  发布在  React
关注(0)|答案(2)|浏览(216)

基于文档,正在为Ant DesignDatePicker使用date-fns替换Moment.js的更新,该更新似乎工作正常。
主要是建议创建以下内容:

import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns'
import generatePicker from 'antd/es/date-picker/generatePicker'

const DatePicker = generatePicker<Date>(dateFnsGenerateConfig)

字符串
然后使用如下组件:

<DatePicker.RangePicker
          placeholder={['From', 'To']}
          onChange={range => setRange(range)}
          value={range}
/>


对于上面的例子,已经创建了RangeValue类型的以下状态:

const [range, setRange] = useState<RangeValue<Date>>(
   [from, to]
)


RangeValue类型已导入如下:

import { RangeValue } from 'rc-picker/lib/interface'

// technically:
// import { RangeValue } from '../../../../node_modules/rc-picker/lib/interface'

问题:

我只在我们有类似对话的一个问题中找到了这个评论。
有没有办法导入RangeValue类型,也许是从Ant Design导入的?谢谢你,谢谢

rbl8hiat

rbl8hiat1#

我很难输入antd值。他们似乎没有提供任何简单的选择。最后,我使用了这个:

type RangeValue = Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[0]

字符串
这将提取发送到onChange函数的第一个参数的类型。它还可以与其他事件(onClick,onBlur等)一起使用。您还可以通过增加方括号中的数字来提取其他参数的类型。现在你可以将这个类型分配给onChange处理程序:

const handleOnChange = (dates: RangeValue, formattedDates: string[]) => {
//do something
return dates 
}

htrmnn0y

htrmnn0y2#

不幸的是,在@mateusz-bacherycz的响应中,类型被定义为“any”,这导致了TypeScript支持的丢失。
类型定义如下:第一个月
只需添加符合您需求的行:

// copied from rc-picker/lib/interface.d.ts
declare type EventValue<DateType> = DateType | null;
declare type RangeValue<DateType> = [EventValue<DateType>, EventValue<DateType>] | null;

字符串
使用方法:

const handleOnChange = (dates: RangeValue, formattedDates: string[]) => {
  //do something
  return dates 
}


如果你想在你的表单中使用范围选择器并以字符串的形式检索值,我使用的是:

import dayjs, {Dayjs} from "dayjs";
import React from "react";
import {RangePickerDateProps} from "antd/es/date-picker/generatePicker";
import {DatePicker} from "antd";

export const DISPLAY_DATE = 'DD.MM.YYYY'
export const SERVER_DATE_FORMAT = "YYYY-MM-DD"

// copied from rc-picker/lib/interface.d.ts
declare type EventValue<DateType> = DateType | null;
declare type RangeValue<DateType> = [EventValue<DateType>, EventValue<DateType>] | null;

const datePickerValue = (value: RangeValue<string> | undefined): RangeValue<Dayjs> | undefined => {
    if (value == undefined) return value
    if (value[0] == undefined || value[1] == undefined) return undefined
    return [dayjs(value[0]), dayjs(value[1])]
}

const FormDateRangePicker: React.FC<RangePickerDateProps<string>> = ({...props}) => {
    const {value, onChange, ...remainingProps} = props

    const onChangeHandler = (value: RangeValue<Dayjs> | undefined, formatString: [string, string]) => {
        const from = value?.[0]?.format(SERVER_DATE_FORMAT) ?? null
        const to = value?.[1]?.format(SERVER_DATE_FORMAT) ?? null
        onChange?.([from, to], formatString)
    }

    return <DatePicker.RangePicker style={{width: "100%"}}
                                   {...remainingProps as RangePickerDateProps<Dayjs>}
                                   format={DISPLAY_DATE}
                                   value={datePickerValue(value)}
                                   onChange={onChangeHandler}
    />
}

export default FormDateRangePicker

相关问题