React?程序設計簡單的輕量級自動完成搜索框應用

更新時間：2022年10月25日 15:22:10 作者：Jovie

這篇文章主要為大家介紹了React?程序設計簡單的輕量級自動完成搜索框應用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

實現(xiàn)效果

一個為React應用程序設計的簡單的輕量級自動完成搜索框。

如何使用它

1.安裝并導入該組件

# Yarn
$ yarn add react-search-box
# NPM
$ npm i react-search-box

import React, { Component } from "react";
import ReactSearchBox from "react-search-box";

2.將ReactSearchBox 組件添加到應用程序中

<ReactSearchBox
  placeholder="Type Something..."
  value="ReactScript"
  data={this.data}
  callback={(record) => console.log(record)}
/>

3.定義你的自動建議列表的數(shù)據(jù)

export default class App extends Component {
  data = [
    {
      key: "react",
      value: "React Native",
    },
    {
      key: "vue",
      value: "Vue Component",
    },
    // ...
  ];
  render() {
    return (
      <ReactSearchBox
        placeholder="Type Something..."
        value="ReactScript"
        data={this.data}
        callback={(record) => console.log(record)}
      />
    );
  }
}

4.所有可用的組件道具

/*
 * The placeholder text for the input box.
 */
placeholder: string;
/*
 * The name attribute for the input box.
 */
name?: string;
/*
 * An array of objects which acts as the source of data for the dropdown. This prop is required.
 */
data: { key: string; value: string }[];
/*
 * Configs to override default Fuse configs.
 */
fuseConfigs?: {};
/*
 * Focus on the input box once the component is mounted.
 */
autoFocus?: boolean;
/*
 * A function which acts as a callback when any record is selected. It is triggered once a dropdown item is clicked.
 */
onSelect: (record: Record) => void;
/*
 * A function which acts as a callback when the input is focussed.
 */
onFocus?: () => void;
/*
 * A function which acts as a callback when the input value is changed.
 */
onChange: (value: string) => void;
/*
 * Color of the text in the input box.
 */
inputFontColor?: string;
/*
 * Color of the border of the input box.
 */
inputBorderColor?: string;
/*
 * Size of the font of the input box.
 */
inputFontSize?: string;
/*
 * Height of the input box.
 */
inputHeight?: string;
/*
 * Background color of the input box.
 */
inputBackgroundColor?: string;
/*
 * Background color on hover of the dropdown list items.
 */
dropdownHoverColor?: string;
/*
 * Border color of the dropdown.
 */
dropdownBorderColor?: string;
/*
 * Clear the input value when any record is selected.
 */
clearOnSelect?: boolean;
/*
 * Icon to be rendered on the left of the input box.
 */
leftIcon?: ReactNode;
/*
 * The size of the icon (based on the leftIcon prop).
 */
iconBoxSize?: number | string;
/*
 * The type of the input.
 */
type?: string;