react-custom-search-input

📦 Install

npm install react-custom-search-input

yarn add react-custom-search-input

🔨 Usage

import { useState } from "react";
import SearchInput from "react-custom-search-input";
import './inputTest.css';

export default function InputTest(){
    const [list] = useState(['111', '222222', '33333', '444', '55555', '666', '77', '888', '9999', '101', '12121', '1313']);
    const [rangeList] = useState([{name: '张三'}, {name: '李四'}, {name: '王五'}]);
    const searchChange = (e: string) => {

    }
    return(
        <div className="inputTest">
            <SearchInput className='searchInput-box' placeholder="请输入名称" keyName='name' list={rangeList} onChange={searchChange}></SearchInput>
        </div>
    )
}

API属性

1. list:数据类型可以是数组也可以是数组对象(不传则为普通搜索)

2. keyName: 展示数组对象中的哪一个文本字段，默认为label

3. defaultValue: 输入框默认内容

4. debounceTime: 防抖时长(单位毫秒)，默认500ms

5. onChange: value值变化时的回调方法 function(value),可在此处进行api接口调用覆盖list数组

6. onPressEnter: 普通搜索回车的回调方法 function(value)

注意

react与react-dom版本>=18.0.0