newICSS/src/common/components/SearchOption/index.jsx

import React from 'react';
import styles from './index.less';
import clear from './imgs/clear.png';
import search from './imgs/search.png';
import PropTypes from "prop-types";
import config from '@config/index';
/**
 * 前提条件父元素有定位
 * visible  搜索显示隐藏
 * handleChangeValue  函数参数为输入框的value值
 */
class SearchOption extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            val:'',
            border:'',
            show:false,
            timer:null
        }
        this.textInput = React.createRef();
        this.handleClearVal = this.handleClearVal.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
    }
    
    /*componentWillReceiveProps(nextProps){
        if(nextProps.visible != this.props.visible) {
            if(!nextProps.visible) {
                this.props.handleChangeValue('');
                this.textInput.current.value = '';
                this.setState({show:false})
            }
            setTimeout(() => {
                this.textInput.current.focus();
            }, 0);
        }
    }*/
    componentDidMount(){
      this.props.handleChangeValue('');
      this.textInput.current.focus();
    }
    handleClearVal(){
        const { handleChangeValue } = this.props;
        this.textInput.current.value = '';
        this.textInput.current.focus();
        this.setState({
            val:'',
            show:false
        });
        handleChangeValue('');
    }
    handleInput(e){
      const { handleChangeValue } = this.props;
        clearTimeout(this.state.timer);
        let timer = setTimeout(()=>{
            clearTimeout(this.state.timer);
            if(e.target.value.trim() == ''){
                this.setState({
                    show:false
                })
                return  handleChangeValue('');
            }
            this.setState({
                val:e.target.value,
                show:true
            })
            handleChangeValue(e.target.value);
        },config.delayTime);
        this.setState({
            timer
        });
    }
    handleFocus(){
      if(this.state.val.trim() != ''){
        return;
      }else{
          this.setState({border:true})
      }
    }
    handleBlur(){
      this.setState({border:false,val:''})
    }
    render() {
        const { children,visible } = this.props;
        const { show } = this.state;
        return (
            <div id="searchOption" className={visible?`${styles.search} ${styles.show} searchOption`:`${styles.search} ${styles.hide} searchOption`}>
                <img className={styles.searchVal} src={search} alt="搜索" />
                <img style={{display:show?'block':'none'}} className={styles.clearVal} src={clear} onClick={this.handleClearVal} alt="清空" />
                <input
                    className={this.state.border ?`${styles.border}`:`${styles.borderNone}`}
                    type="text"
                    maxLength="30"
                    ref={this.textInput}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    onInput={(e) => { 
                        this.handleInput(e)
                    }}
                    onPropertyChange={(e) => {  // 兼容ie
                        this.handleInput(e)
                    }}
                    placeholder="搜索"
                />
                <div className={styles.autoList}>
                    {children}
                </div>
            </div>
        )
    }
}
SearchOption.defaultProps = {
    visible: false
};

SearchOption.propTypes = {
    visible:PropTypes.bool,
    handleChangeValue: PropTypes.func
};
export default SearchOption;