react+antd(RangePicker,DatePicker,Select)常用组件碰到的问题总结

对antd使用没有深入研究,下面一些为碰到的有些组件的问题,以及解决方式
1.筛选框
a.时间筛选框(有时候需要清空筛选框,这时需要给筛选框设置key属性值,初始可以设置为空即可)

 <RangePicker style={{width: 180}}
            key={this.state.keyValue}    //当点击重置或者清空按钮时,在将值设置为  keyValue: new Date(),
            onChange={(data, dataString) => {
            this.setState({startTime: dataString[0]});
            this.setState({endTime: dataString[1]})
  }}/>
*b.当需要**返显**时间筛选框时间时,需要设置defaultValue值,结合moment使用需要先判断当前要返显的值是否存在*
<DatePicker
                        defaultValue={this.state.startTime ? moment(this.state.startTime, 'YYYY-MM-DD') : null}   //startTime为你要返显的时间
                        disabledDate={(date) => {
                            return (!date || date.valueOf() > Date.now())
                        }} onChange={(a, date) => {
                        this.setState({startTime: date})
                    }}/>
*c 普通单选选择框 设置value值,通过value={{key:this.state.key}}

2.多选框(multiple)
a.清空(添加key属性),当点击清空时,给key设置随机数

<Select labelInValue mode="multiple" key={this.state.selectValue}   // 清空时设置 selectValue: Math.random()
                            style={{minWidth: 200, width: 'auto'}}
                            onChange={(res) => {
                                let r = [];
                                res.map((v) => {
                                    r.push(v.key)
                                });
                                const param = {
                                    loanType: r.join(',')
                                };
                                this.queryTableOK(param)
                                this.setState(param)
                            }}>
                         <Option value="disabled" disabled>请选择</Option>
                    </Select>
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值