自动完成 ReactJS 中的选项自由文本

在 ReactJS 中，自动完成（Autocomplete）可以让用户快速输入并选择选项，同时也可以通过输入自由文本来创建新的选项。本文将介绍如何使用 ReactJS 来实现自动完成功能，并让它能够支持自由文本。

安装

我们使用 npm 来安装需要的库：

npm install react-autocomplete

基本用法

首先，我们需要引入 react-autocomplete 库，并创建一个基本的输入框和一个选项列表：

import React from 'react';
import Autocomplete from 'react-autocomplete';

const AUTOCOMPLETE_OPTIONS = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Pear', value: 'pear' },
];

function AutocompleteExample() {
  return (
    <Autocomplete
      items={AUTOCOMPLETE_OPTIONS}
      getItemValue={(item) => item.value}
      renderItem={(item) => <div>{item.label}</div>}
    />
  );
}

export default AutocompleteExample;

这里，我们使用了 items 属性来设定选项列表，使用 getItemValue 属性来指定选项的唯一值，使用 renderItem 属性来指定如何渲染每个选项。现在，我们已经可以在输入框中输入并选择选项了。

支持自由文本

为了支持自由文本，我们需要监听输入框的变化，并根据输入的值来动态生成选项。这里我们可以使用 onInput 属性和 setState 方法：

import React, { useState } from 'react';
import Autocomplete from 'react-autocomplete';

const AUTOCOMPLETE_OPTIONS = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Pear', value: 'pear' },
];

function AutocompleteExample() {
  const [currentValue, setCurrentValue] = useState('');
  const [currentOptions, setCurrentOptions] = useState(AUTOCOMPLETE_OPTIONS);

  function handleInput(event) {
    const value = event.target.value;
    setCurrentValue(value);

    const filteredOptions = AUTOCOMPLETE_OPTIONS.filter((option) => {
      return option.label.toLowerCase().startsWith(value.toLowerCase());
    });

    if (filteredOptions.length === 0) {
      setCurrentOptions([{ label: value, value: value }, ...AUTOCOMPLETE_OPTIONS]);
    } else {
      setCurrentOptions(filteredOptions);
    }
  }

  return (
    <Autocomplete
      items={currentOptions}
      getItemValue={(item) => item.value}
      renderItem={(item) => <div>{item.label}</div>}
      value={currentValue}
      onChange={handleInput}
    />
  );
}

export default AutocompleteExample;

这里，我们使用了两个状态 currentValue 和 currentOptions 来分别存储当前输入的值和当前可选的选项列表。在 handleInput 方法中，我们首先更新了 currentValue，然后根据输入的值来筛选出符合条件的选项，并更新 currentOptions。如果没有符合条件的选项，我们就手动加上一个新的选项。最后，我们将 handleInput 方法绑定到输入框的 onChange 属性上。

总结

现在，我们已经成功地在 ReactJS 中实现了自动完成并支持自由文本，用户可以在输入框中自由输入并创建新的选项，从而提高了用户体验。完整的代码示例可以在 GitHub 上找到。