antd-tabs里添加datepicker,切换如何清空datepicker的值

antd-tabs里添加datepicker,切换如何清空datepicker的值

问题描述:

利用tabBarExtraContent这个API在两个tabs上分别添加了一个DatePicker控件,其中一个DatePicker有value值的时候切换tab另一个DatePicker也会存在值,有什么办法可以在切换tab的时候清空DatePicker的值?

import React, { Component, useState, useEffect } from 'react';
import { Tabs, DatePicker } from 'antd';
import moment from "moment";
const { TabPane } = Tabs;


class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            key:1
        }
    }
    change = (key) => {
        this.setState({
            key:key
        })
    }
    render() {
        let {key}=this.state;
        return (
            <div>
                <Tabs defaultActiveKey="1" onChange={this.change}>
                    <TabPane tab="Tab 1" key="1" value="">
                         {
                          key=="1"? <DatePicker  />:""
                         }
                       
                    </TabPane>
                    <TabPane tab="Tab 2" key="2">
                        Content of Tab Pane 2
                    </TabPane>
                    <TabPane tab="Tab 3" key="3">
                        Content of Tab Pane 3
                    </TabPane>
                </Tabs>
            </div>
        )
    }

}
export default Index

value=""不行吗