antd select列表内容更新列表不关闭
程序员文章站
2022-07-05 18:17:18
...
组件效果如图:
这个是在列表中没有的情况下可以通过底部的新建按钮去快速跳转添加
右面的刷新按钮是新建完成之后可以直接刷新获取最新的列表项内容。
<FormItem label='类型' {...this.formLayout}>
{getFieldDecorator('productTypeId', {
initialValue: details.productTypeId,
rules: [{ required: true, message: '请选择产品类型' }] })(
<Select
onChange={this.selectChange}
dropdownRender={menu => (
<div> {menu} <Divider style={{ margin: '4px 0' }} />
<div className={styles.toCreateBtnGroup} >
<Button icon='plus' onMouseDown={this.toCreateProductType}>
新建产品类型
</Button>
<Button icon='undo' onMouseDown={(e) => this.reloadData(e, 0)}>
刷新
</Button>
</div>
</div>)}>
{productTypeList.map(item => (
<Option key={item.id}>
{item.name}
</Option>))}
</Select>)}
</FormItem>
这里有个问题就是我点击选择框底部的刷新按钮发送网络请求获得最新的
列表内容时选择框列表窗会自动关闭导致不能直观的看出刷新的效果
reloadData = ( e,num ) =>{
const {dispatch} = this.props;
e.preventDefault(); // 使选择框列表窗不会自动关闭的方法
dispatch({
type:******,
payload:{}
})
};
本来想了很久没找到方法;没想到只要在刷新的方法中阻止默认事件
就可以达到刷新选择框内容选择框列表窗不关闭的效果,使选择框底部刷新按钮
效果更加直观。