Ant 设计:从 onChange 中的 datepicker 获取 Id

Posted

技术标签:

【中文标题】Ant 设计:从 onChange 中的 datepicker 获取 Id【英文标题】:Ant design: get Id from datepicker in onChange 【发布时间】:2019-01-14 11:02:09 【问题描述】:

我在 React-Redux 应用中有一个包含多个 Datepicker 的表单,我需要知道已使用的 Datepicker 的 id。

创建日期选择器后,我可以为onChange 方法分配一个函数(此方法有两个参数(日期)可供使用)。

<DatePicker
   title=field.title
   placeholder=field.title    
   format="YYYY/MM/DD"
   size=params.fieldsize
   onChange=this.handleDatePickerChange
/>

我需要在 handleDatePickerChange 函数中检索 Datepicker 的 id:

handleDatePickerChange = (date, dateString) => 
   // get the id
   ...

(date, dateString) 是返回的回调函数的参数。见https://ant.design/components/date-picker/#DatePicker中的onChange方法

一个回调函数,可以在选择的时间发生变化时执行。

我该怎么做?

【问题讨论】:

【参考方案1】:

您可以在onChange 函数中发送一个额外的变量,如下所示:

onChange=(date, dateString) => this.handleDatePickerChange(date, dateString, 1)

然后在handleDatePickerChange 方法中你可以得到它,如下所示:

handleDatePickerChange = (date, dateString, id) => 
   console.log(id);
   ...

我在codesandbox.io 上创建了一个演示。

【讨论】:

我希望 onChange 方法触发一个传递 Event 对象的事件。

以上是关于Ant 设计:从 onChange 中的 datepicker 获取 Id的主要内容,如果未能解决你的问题,请参考以下文章

Ant Design Vue 中 DatePicker 日期选择框 使用

react学习(63)--ant design 锚点

Ant Design 方法默认传值,加上其他参数

React开发(153):ant design自定义列

React开发(158):ant design级联回显 直接传入数组

从 Ant 设计表中删除默认填充