遇到了一个需求,就是tab的时候,上面选择的时间清空
核心就是给日期选择器绑定一个key值,tab变化时,改变key值即可
下面是代码
import React, { useState } from 'react'
import { DatePicker, Tabs } from 'antd'
const { RangePicker } = DatePicker
export default function Hhh() {
// 定义一个变量,一会清空时间的时候用,给日期组件绑定key值,tab变化时就让它为空,然后就会触发渲染
const [tempTime, setTempTime] = useState('随便')
// tab变化
const tabChange = (key) => {
setTempTime(new Date())
}
return (
<div>
<RangePicker
showTime={
{
format: 'HH:mm',
}}
format="YYYY-MM-DD HH:mm"
// onChange={timeChange}
placeholder={['开始时间', '结束时间']}
key={tempTime}
/>
<Tabs
onChange={tabChange}
items={[
{
label: `Tab 1`,
key: '1',
children: `Tab Pane 1`,
},
{
label: `Tab 2`,
key: '2',
children: `Tab Pane 2`,
},
{
label: `Tab 3`,
key: '3',
children: `Tab Pane 3`,
},
]}
/>
</div>
)
}