欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

antd select列表内容更新列表不关闭

程序员文章站 2022-07-05 18:17:18
...

组件效果如图:
antd select列表内容更新列表不关闭这个是在列表中没有的情况下可以通过底部的新建按钮去快速跳转添加
右面的刷新按钮是新建完成之后可以直接刷新获取最新的列表项内容。

<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:{}
	})
 }

本来想了很久没找到方法;没想到只要在刷新的方法中阻止默认事件
就可以达到刷新选择框内容选择框列表窗不关闭的效果,使选择框底部刷新按钮
效果更加直观。