自动完成时的 Reactstrap 输入背景颜色

Reactstrap 是一种基于 Bootstrap 4 的 React UI 库，它提供了一组易用且可定制的组件。其中包括了输入框组件，使用这些组件可以方便地创建输入框，包括单行文本框、多行文本框、密码框、选择器等等。

当需要为输入框组件添加自动完成时，我们可以使用 react-autosuggest 这个库，它为 Reactstrap 输入框组件的自动完成功能提供了完整的实现。

在 Reactstrap 输入框组件的自动完成功能中，我们可以通过更改输入框的背景颜色来使其更加醒目和美观。以下是更改输入框组件的自动完成时背景颜色的步骤：

1. 首先，安装 react-autosuggest 和 reactstrap：

npm install --save react-autosuggest reactstrap

2. 在你的 React 组件中导入需要的组件：

import React, { useState } from 'react';
import Autosuggest from 'react-autosuggest';
import { Input } from 'reactstrap';

3. 编写一个自定义的样式表，将需要更改的样式属性设置为你喜欢的值（如下所示）：

.react-autosuggest__input {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #ced4da;
  font-size: 16px;
  color: #495057;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

此样式表将输入框的背景颜色更改为白色。如果你想要其他的背景颜色，可以将样式表中的 background-color 设置为你喜欢的颜色值。

4. 在你的组件中使用 Autosuggest 和 Input 组件来创建输入框和自动完成组件。将自定义的样式表传递给 Autosuggest 组件。

const [suggestions, setSuggestions] = useState([]);

const getSuggestions = value => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;
  return inputLength === 0 ? [] : suggestions.filter(suggestion =>
    suggestion.name.toLowerCase().slice(0, inputLength) === inputValue
  );
};

const renderSuggestion = suggestion => (
  <div>
    {suggestion.name}
  </div>
);

const onChange = (event, { newValue }) => {
  setValue(newValue);
};

const onSuggestionsFetchRequested = ({ value }) => {
  setSuggestions(getSuggestions(value));
};

const onSuggestionsClearRequested = () => {
  setSuggestions([]);
};

return (
  <Autosuggest 
    suggestions={suggestions}
    onSuggestionsFetchRequested={onSuggestionsFetchRequested}
    onSuggestionsClearRequested={onSuggestionsClearRequested}
    getSuggestionValue={getSuggestionValue}
    renderSuggestion={renderSuggestion}
    inputProps={{
      placeholder: "Type 'c'",
      value: value,
      onChange: onChange
    }}
    theme={{
      input: 'react-autosuggest__input',
      suggestionsList: 'react-autosuggest__suggestions-list',
      suggestion: 'react-autosuggest__suggestion'
    }}
  />
  <Input value={value} />
);

5. 最后，在你的样式表中将 react-autosuggest__input 设置为你所定义的样式表名。例如，如果你的样式表名为 custom-input，可以这样：

.custom-input {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #ced4da;
  font-size: 16px;
  color: #495057;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

现在你的 Reactstrap 输入框组件的自动完成背景颜色已经更改了，具有更好的可读性和美观度。

以上就是更改自动完成时的 Reactstrap 输入背景颜色的完整步骤和方法。