ReactJS 常青自动完成组件

React Evergreen 是一个流行的前端库，其中包含一组用于构建漂亮产品的 React 组件，因为该库灵活、合理的默认设置和用户友好。自动完成组件用于使用选项 value 自动完成自由文本值。它基本上允许用户从选项列表中键入和选择项目。我们可以在 ReactJS 中使用以下方法来使用 Evergreen 自动完成组件。

自动完成道具：

标题：用于为项目提供标题。
items：用于表示要用作选择选项的项目数组。
selectedItem：用于表示要在自动完成中显示的选定项。
itemToString：这是一个函数，用于在每个项目上返回将在过滤器上显示的字符串，以防项目数组不是字符串数组。
children：这是一个用于渲染“过滤器”组件的函数。
itemSize：用于表示列表中每一项的高度。
renderItem：它是一个函数，它返回一个组件来渲染项目。
position：用于popover的位置。
itemsFilter：这是一个用于过滤项目的函数。
isFilterDisabled：用于启用和禁用过滤。
popoverMinWidth：用于表示结果容器的最小高度。
popoverMaxHeight：用于表示结果容器的最大高度。
allowOtherValues：用于指示输入是否接受超出提供项的任意用户输入。

AutocompleteItem 道具：

children：用于传递该组件的子元素。
style：用于传递组件的样式。
isSelected：用于表示该项是否被选中。
isHighlighted：用于指示是否突出显示该项目。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，使用以下命令安装所需的模块：
```
npm install evergreen-ui
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
import { Autocomplete, TextInput } from 'evergreen-ui'
  
export default function App() {
  return (
    
      ReactJS Evergreen Autocomplete Component
      
        {props => {
          return (
            
          )
        }}
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://evergreen.segment.com/components/autocomplete/props