React 程序设计简单的轻量级自动完成搜索框应用
短信预约 -IT技能 免费直播动态提醒
实现效果
一个为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.定义你的自动建议列表的数据
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.所有可用的组件道具
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;
预览
The postAutocomplete Search Box For Reactappeared first onReactScript.
以上就是React 程序设计简单的轻量级自动完成搜索框应用的详细内容，更多关于React 轻量级自动搜索框的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
