antd遇坑系列之<RangePicker/>

datepicker.jpg

上图是我代码应用场景，选中时间后,从移动应用tab切换至浏览器tab的时候清空所选的时间value值

官网是有这种格式的如下：

 <RangePicker
      defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)] />

moment里面是第一项是他的value值，我在项目中将它设置成一个变量了，这样便于控制

//提前在state中设置状态
this.state={
      startTime:undefined,//开始时间
      endTime:undefined,  //结束时间
 }

<RangePicker 
onChange={this.onPickerChange} 
value=[moment(this.state.startTime, dateFormat), moment(this.state.endTime,dateFormat)]
format={dateFormat}
placeholder={['开始时间','结束时间']}
/>

如果这样写的话，就会因为不符合moment的格式报NAN的错误，如下图

NaN.jpg

这是因为moment的格式是必须符合自己设定的dateFormat的格式(我的设置的是2017-12-24这种类型的)，由于初始值undefined不符合这种类型，所以此时我们需要对value做一下判断了

正确修改代码如下：

<RangePicker 
          onChange={this.onPickerChange} 
          value={this.state.startTime===undefined||this.state.endTime===undefined?null:[moment(this.state.startTime, dateFormat), moment(this.state.endTime, dateFormat)]}
          //在这里对初始值做了判断，如果是undefined的时候，value值是空，否则是自己选中的值
          format={dateFormat}
          placeholder={['开始时间','结束时间']}
        />

完整代码如下：

const { RangePicker, } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm'||undefined;
export default class TableHeader extends React.Component{
     constructor(props){
    super(props);
    this.state={
      startTime:undefined,//开始时间
      endTime:undefined,  //结束时间
    }
}
  //切换tab的时候的回调函数
  tabChange=(activeKey)=>{
    this.setState({
      startTime:undefined,//开始时间
      endTime:undefined,  //结束时间
    })
  }
  
  //时间改变的方法
  onPickerChange=(date, dateString)=>{
    console.log("data",date,"dateString",dateString);
    //这两个参数值antd自带的参数
    console.log("dateString",dateString[0],"dateString",dateString[1]);
    this.setState({
      startTime:dateString[0],
      endTime:dateString[1],  
    })
  }
  render(){
      return(
          <div>
          //........
          <RangePicker 
          onChange={this.onPickerChange} 
            value={this.state.startTime===undefined||this.state.endTime===undefined||this.state.startTime===""||this.state.endTime===""?null:[moment(this.state.startTime, dateFormat), moment(this.state.endTime, dateFormat)]}
            format={dateFormat}
            placeholder={['开始时间','结束时间']}
            />
          </div>
      )
  }
}   

这块的value值要说一下：value= {this.state.startTime===undefined||this.state.endTime===undefined||this.state.startTime===""||this.state.endTime===""?null:[moment(this.state.startTime, dateFormat), moment(this.state.endTime, dateFormat)]}

可能有人会有疑问，为什么还会有this.state.startTime===""||this.state.endTime===""的情况，这是因为组件选中后点击清空按钮的时候会自动赋值为空，一赋值为空的时候就会不符合自定义的日期格式，就会出现NaN

PS:本人只是一枚废柴小码农，在实战中积累经验，只是将所踩过的坑分享出来给遇到同样坑的小伙伴们提个醒，可能会少走些弯路。如果能帮助到你解决实际问题，我将更加坚定分享的初衷：一起成长。
目前只在知乎上和简书上更新文章，准备在这两个地方持续更新文章，您的关注对我可能是莫大的鼓励。

知乎用户名：废柴码农
微博用户名：执拗病患者

哈哈，交个朋友啦~