React 组件封装之 Search 搜索

一、Search 搜索框

组件说明：
实现搜索框搜索功能。

效果展示：
输入关键字，可以通过键盘的搜索按钮完成搜索功能。

二、使用案例

import {Search} from 'share';
import React from 'react';
export default class Example extends React.Component {
    constructor(props) {
        super(props);
    }
    
    search(val){
      console.log(val);
    }
    render(){
      return <Search onSearch={(val)=>this.search(val)}>	
    }
}

三、API 使用指南

属性	说明	类型	默认值
searchIcon	搜索图标	string	不传为默认图标
onSearch	点击搜索触发事件	string	(e: Object): void
onRightClick	点击右边图标触发事件	string	(e: Object): void
rightIcon	右边的图标	string	不传为默认图标
closeIcon	关闭的图标	string	不传为默认图标
placeholder	输入框提示文字	string	空

四、源代码

index.js

import React from 'react';
import './index.css';
import {defaultProps} from './defaultProps';
export default class Search extends React.Component {
    static defaultProps = defaultProps;
    constructor(props) {
        super(props);
        this.state = {
            isShowClose: false,//是否显示搜索框右边关闭按钮
        }
    }
    //点击左边搜索图标触发的事件
    leftClick() {
       this.callBack();
    }
    //输入框回调
    callBack(){
        const {onSearch} =this.props;
        var key = this.refs.input.value;
        if (onSearch) {
            onSearch(key);
        }
    }
    //执行右边图标的事件
    rightClick() {
        const {onRightClick} =this.props;
        if (onRightClick) {
            onRightClick();
        }
    }
    //点击搜索框右边关闭图标时，清楚搜索内容并删除图标
    closeValue() {
        this.refs.input.value = '';
        this.setState({
            isShowClose: false
        });
    }
    //点击搜索框进行关键字搜索时，出现右边关闭图标
    onChange(event) {
        if (event.target.value === '') {
            this.setState({
                isShowClose: false
            })
        } else {
            this.setState({
                isShowClose: true
            })
        }
    }
    //按下键盘时触发的事件
    keyDown(e){
        if(e.keyCode === 13){
            e.preventDefault();
            this.refs.input.blur();
            this.callBack();
        }
    }
    render() {
        const {
            prefixCls,
            searchIcon,
            rightIcon,
            placeholder,
            closeIcon
        } =this.props;
        return (
            <div className={prefixCls}>
                <div className={prefixCls+"-layout"}>
                    <div className={prefixCls+"-content-left"}>
                        <img src={searchIcon} alt="" className={prefixCls+"-search-icon"}
                             onClick={() => this.leftClick()}/>
                        <form action="#" className={prefixCls+"-form"}>
                        <input type="search" ref="input"  className={prefixCls+"-input"}
                               placeholder={placeholder}
                               onChange={(e) => this.onChange(e)}
                               onKeyDown={(e)=>this.keyDown(e)}
                        />
                        </form>
                        {this.state.isShowClose ?
                            <img src={closeIcon} alt="" className={prefixCls+"-close-icon"}
                                 onClick={() => this.closeValue()}/> : null
                        }
                    </div>
                    {rightIcon?<img src={rightIcon} alt="" className={prefixCls+"-right-icon"} onClick={() => this.rightClick()}/>:null}
                </div>
            </div>
        )
    }
}

index.less

@import '../default';
@prefixCls: s-search;

/* 默认搜索bar */
.@{prefixCls} {
  height: @size-40+5;
  .@{prefixCls}-layout {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    background: @bc-main;
    right: 0;
    padding: 0 10px;
    z-index: 99;
    height:@size-40+5;
    .@{prefixCls}-content-left{
      display: flex;
      width: 100%;
      .@{prefixCls}-search-icon{
        width: @size-14;
        height: @size-14;
        position: absolute;
        top:50%;
        transform: translate(50%, -50%);
      }
      .@{prefixCls}-form{
        width: 100%;
      }
      .@{prefixCls}-input{
        background: @bc-white;
        border: 1px solid #ddd;
        border-radius: @size-20;
        height: @size-30;
        padding: @size-10 @size-10 @size-10 @size-20+5;
        width: 100%;
        margin-right:@size-10;
        font-size: @size-14;
      }
      .@{prefixCls}-input::-webkit-input-placeholder{
        color: @c-ccc;
      }
      .@{prefixCls}-close-icon{
        width:@size-14;
        height: @size-14;
        position: absolute;
        top:50%;
        right: @size-40+5;
        transform: translate(-50%, -50%);
      }
    }
    .@{prefixCls}-right-icon{
      margin-left:@size-10;
      width: @size-20;
      height: @size-20;
    }
  }
}

defaultProps.js

import search from '../images/search/search.png';
import close from '../images/search/close.png';
function noop() {}
export const defaultProps = {
    prefixCls: 's-search',
    placeholder: '',
    leftClick: noop,
    rightClick: noop,
    searchIcon: search,
    closeIcon:close,
    rightIcon: "",
};