2BCmsBrowser/src/components/DataSearch/index.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Input, Select, Button, Icon } from 'antd';
import styles from './index.less';

export default class DataSearch extends PureComponent {
  static propTypes = {
    size: PropTypes.string,
    select: PropTypes.bool,
    selectProps: PropTypes.object,
    onSearch: PropTypes.func,
    selectOptions: PropTypes.array,
    style: PropTypes.object,
    keyword: PropTypes.string,
  }
  constructor(props) {
    super(props);
    const { select, selectProps, keyword } = this.props;
    this.state = {
      selectValue: select && selectProps ? selectProps.defaultValue : '',
      inputValue: keyword ? keyword : '',
    }
  }
  handleSearch = () => {
    const query = { keyword: this.state.inputValue };
    if (this.props.select) {
      query.field = this.state.selectValue;
    }
    this.props.onSearch && this.props.onSearch(query);
  }
  handleSelectChange = (value) => {
    this.setState({
      ...this.state,
      selectValue: value,
    });
  }
  handleInputChange = (e) => {
    this.setState({
      ...this.state,
      inputValue: e.target.value,
    });
  }
  handleClearInput = () => {
    this.setState({
      inputValue: '',
    }, () => this.handleSearch());
  }
  render() {
    const { size, select, selectOptions, selectProps, style } = this.props;
    const { inputValue } = this.state;
    const suffix = inputValue ? <Icon type="close-circle" onClick={this.handleClearInput} /> : null;
    return (
      <Input.Group compact size={size} className={styles.search} style={style}>
        {select && <Select onChange={this.handleSelectChange} size={size} {...selectProps}>
          {selectOptions && selectOptions.map((item, key) => <Select.Option value={item.value} key={key}>{item.name || item.value}</Select.Option>)}
        </Select>}
        <Input placeholder="请输入" suffix={suffix} onChange={this.handleInputChange} onPressEnter={this.handleSearch} size={size} value={inputValue}/>
        <Button onClick={this.handleSearch} size={size} type="primary" icon="search">搜索</Button>
      </Input.Group>
    );
  }
}