项目场景:
表单A下拉选择日或者月,表单B点击显示相对应的日期选择器问题描述:
表单A选择日,表单B点击显示日期选择器,表单A重新选择月,表单B点击仍旧显示日期选择器(此时应该显示月份选择器),有问题的代码(使用三元运算符判断)如下:
{queryType === 'D'
?
<DatePicker
allowClear={false}
value={moment(dayValue)}
style={{ width: '232px' }}
disabledDate={this.disabledDate}
onChange={val => this.dayPicker(val)} />
:
<DatePicker
picker="month"
allowClear={false}
value={moment(monthValue)}
style={{ width: '232px' }}
disabledDate={this.disabledMonth}
onChange={val => this.monthPicker(val)} />
}
解决方案:
不用三元运算符判断来决定显示什么选择器,
{queryType === 'D' &&
<DatePicker
allowClear={false}
value={moment(dayValue)}
style={{ width: '232px' }}
disabledDate={this.disabledDate}
onChange={val => this.dayPicker(val)} />
}
{queryType === 'M' &&
<DatePicker
picker="month"
allowClear={false}
value={moment(monthValue)}
style={{ width: '232px' }}
disabledDate={this.disabledMonth}
onChange={val => this.monthPicker(val)} />
}
可以正常显示啦~~~