antd TimePicker.RangePicker 如何设置默认值？双向绑定？

Dark_programmer

于 2021-07-09 11:11:00 发布

阅读量7k

点赞数 2

分类专栏： antd

本文链接：https://blog.csdn.net/Dark_programmer/article/details/118601705

版权

antd 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在React项目中使用Ant Design的TimePicker组件实现时间选择功能，并通过双向绑定来更新状态。文章详细解释了如何安装依赖、设置初始时间和处理时间变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查看antd官方API可知，默认值使用defaultValue，绑定值使用value.

此处仅展示react使用该组件，用value双向绑定方式

首先安装插件moment

yarn add moment -S

组件内使用：

import moment from 'moment'
...
state = {
	// 定义变量存储
	startTime:new Date().getTime(),  //  当前时间 
	endTime:new Date().getTime()+ (30 * 60 *1000), // 当前时间 + 30min
}

...

onChange = ( val, str) => {
	// 组件改变，修改state存储数据
	this.setState({
       startTime: val[0]._d.getTime(),
       endTime: val[1]._d.getTime(),
    });
 }

...




render(){
	// 关键之处在于value值是一个数组，且
	const { startTime, endTime } = this.state
	return (
		 <TimePicker.RangePicker
              format={"HH:mm"}
              value={[moment(new Date(startTime)), moment(new Date(endTime))]}
              onChange={(time, timeString) =>
                this.onChange( time, timeString)
              }
            />
	)
}