1. 筛选框
  • 时间筛选框(有时候需要清空筛选框,这时需要给筛选框设置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]})
  }}/>
  • 当需要返显时间筛选框时间时,需要设置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})
                    }}/>
  • 普通单选选择框 设置value值,通过value={{key:this.state.key}}
  1. 多选框(multiple)
  • 清空(添加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>
  1. 文字提示 Tooptop 组件
  • 当返回的数据为html需要渲染时,title支持,直接DangerousSetInnerHTML渲染。
<Tooltip arrowPointAtCenter title={<div dangerouslySetInnerHTML={{__html:title}}></div>} placement="topLeft">
    <Icon type="info-circle" style={{cursor:'pointer',
        fontSize: '15px',
        marginLeft: '5px',
        color: '#00C089'}}/>
</Tooltip>
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐