react+antd(RangePicker,DatePicker,Select)常用组件碰到的问题汇总
对antd使用没有深入研究,下面一些为碰到的有些组件的问题,以及解决方式1.筛选框a.时间筛选框(有时候需要清空筛选框,这时需要给筛选框设置value属性值)<RangePicker style={{width: 180}}key={this.state.keyValue}//当点击重置或者清空按钮时,在将值设置为keyValue: new Da...
·
- 筛选框
- 时间筛选框(有时候需要清空筛选框,这时需要给筛选框设置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}}
- 多选框(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>
- 文字提示 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>
更多推荐
所有评论(0)