[react]react中RangePicker的值的重置问题

楼主^#

更多发布于：2021-04-29 13:58

我需要实现一个通过一个时间段来筛选表格里面的数据的功能，此文章描述我使用value和defaultValue的踩坑事件：

&lt;RangePicker
    allowClear
    showTime=pw_ format: 'HH:mm' 
    format="YYYY-MM-DD HH:mm"
    defaultValue={this.state.timeStart===undefined||this.state.timeEnd===undefined||this.state.timeStart===""||this.state.timeEnd===""?null:[moment(this.state.timeStart, "YYYY-MM-DD HH:mm ||undefined"), moment(this.state.timeEnd, "YYYY-MM-DD HH:mm ||undefined")]}
    placeholder={['开始时间','结束时间']}
    onChange={this.onTimerChange}
    onOk={this.onTimerOk}
/&gt;

此功能我最开始使用的value，但是点击确定之后，时间段自动清除了，所以之后采用defaultValue，但是新的问题来了，当我点击重置按钮，使用setState给这两个值赋值为空的时候，并不能改变数据，后来发现需要绑定一个key值。
所以需要在state里面存一个keyNum，初始值我设置成1，在RangePicker中绑定这个key，代码如下：

&lt;RangePicker
    allowClear
    showTime=pw_ format: 'HH:mm' 
    format="YYYY-MM-DD HH:mm"
    key={this.state.keyNum}
    defaultValue={this.state.timeStart===undefined||this.state.timeEnd===undefined||this.state.timeStart===""||this.state.timeEnd===""?null:[moment(this.state.timeStart, "YYYY-MM-DD HH:mm ||undefined"), moment(this.state.timeEnd, "YYYY-MM-DD HH:mm ||undefined")]}
    placeholder={['开始时间','结束时间']}
    onChange={this.onTimerChange}
    onOk={this.onTimerOk}
/&gt;

然后在调用重置方法里面，修改这个keyNum，这个地方需要注意，setState中不能写成 keyNum:keyNum++,要写成：

keyNum:++keyNum

喜欢2

[react]react中RangePicker的值的重置问题

最新喜欢：