React 程序设计简单的轻量级自动完成搜索框应用

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

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

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

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)}
      />
    );
  }
}

placeholder: string;

name?: string;

data: { key: string; value: string }[];

fuseConfigs?: {};

autoFocus?: boolean;

onSelect: (record: Record) => void;

onFocus?: () => void;

onChange: (value: string) => void;

inputFontColor?: string;

inputBorderColor?: string;

inputFontSize?: string;

inputHeight?: string;

inputBackgroundColor?: string;

dropdownHoverColor?: string;

dropdownBorderColor?: string;

clearOnSelect?: boolean;

leftIcon?: Reactnode;

iconBoxSize?: number | string;

type?: string;