ant-design 实现 搜索功能

1.逻辑代码

list.js

/**
 * 用户列表页
 */
import React,{ PureComponent } from 'react'
import {connect} from 'react-redux'
import {history} from '../../store'
import styles from './index.less'
import { Row, Col, Card, Form, Input, Select, Button } from 'antd';

const FormItem = Form.Item;
const { Option } = Select;
const statusMap = ['success', 'error'];
const status = ['启用', '禁用',];

/**
 *  用户列表
 */
@Form.create()
class UserList extends PureComponent{
  state = {
    //
  };

  renderAdvancedForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      

        {/*搜索条件*/}
        
          
            
              {getFieldDecorator('username')(
                
              )}
            
          
          
            
              {getFieldDecorator('name')(
                
              )}
            
          
          
            
              {getFieldDecorator('status')(
                
                  启用
                  禁用
                
              )}
            
          
        
        {/*按钮*/}
        

          
            (
                history.push("/syster/user/add")
              )}
            >
              新建
            
          
          
            查询
            重置
          
        
      
    );
  }

  // 查询
  handleSearch(e){
    // 禁止默认行为
    e.preventDefault();
    // 获取 form 表单的值
    console.log(this.props.form.getFieldsValue());
  }

  // 重置
  handleFormReset(){
    this.props.form.resetFields();
  }


  render(){

    return(
      
        

          

            {this.renderAdvancedForm()}
          
        
      
    )
  }
}

export default connect (({ user })=>(
  user
))(UserList)

2.样式

@import "~antd/lib/style/themes/default.less";
@import "../../utils/utils.less";

.tableList {
  .tableListOperator {
    margin-bottom: 16px;
    button {
      margin-right: 8px;
    }
  }
}

.tableListForm {
  :global {
    .ant-form-item {
      margin-bottom: 24px !important;
      margin-right: 0;
      display: flex;
      > .ant-form-item-label {
        width: auto;
        line-height: 32px;
        padding-right: 8px;
      }
      .ant-form-item-control {
        line-height: 32px;
      }
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
  .submitButtons {
    white-space: nowrap;
    margin-bottom: 24px;
  }
}

@media screen and (max-width: @screen-lg) {
  .tableListForm :global(.ant-form-item) {
    margin-right: 24px;
  }
}

@media screen and (max-width: @screen-md) {
  .tableListForm :global(.ant-form-item) {
    margin-right: 8px;
  }
}

3.效果图