xlyErp / xlyUmi

import React, { Component } from 'react';
import classNames from 'classnames';
import { Input } from 'antd-v4';
import styles from '../../index.less';

const { Search } = Input;

class SearchComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchName: this.props.value || '',
    };
  }
  handleChange = (event) => {
    this.setState({
      searchName: event.target.value,
    });
    if (this.props.onChange) {
      this.props.onChange(event);
    }
  };
  handleSearch = (value) => {
    if (this.props.onSearch) {
      this.props.onSearch(value);
    }
  };
  handleFocus = () => {
    this.setState({ searchMode: true });
  };
  handleBlur = () => {
    this.setState({
      searchMode: false,
      searchName: '',
    });
  };
  render() {
    const searchClass = classNames(styles.searchBox, {
      [styles.show]: this.state.searchMode,
    });
    const { disabled } = this.props;
    return (
      <Search
        placeholder="请输入关键字"
        onChange={this.handleChange}
        onSearch={this.handleSearch}
        onFocus={this.handleFocus}
        onBlur={this.handleBlur}
        value={this.state.searchName}
        disabled={disabled}
        enterButton
        className={searchClass}
      />
    );
  }
}

export default SearchComponent;