如何在React中显示自动完成文本字段中的选定值？

在React中显示自动完成文本字段中的选定值，可以通过使用React组件和状态管理来实现。

首先，你可以使用React的受控组件来创建一个文本字段，并使用状态来跟踪用户输入的值。例如，你可以使用<input>元素和onChange事件来监听用户输入的变化，并将输入的值存储在组件的状态中。

接下来，你可以使用一个下拉菜单或弹出窗口来显示自动完成的选项。这些选项可以是静态的，也可以是从服务器获取的动态数据。你可以使用React的条件渲染来根据用户输入和状态来显示或隐藏这些选项。

当用户选择一个选项时，你可以更新文本字段的值，以显示选定的值。你可以使用React的状态更新机制来更新文本字段的值，并在组件重新渲染时反映出来。

以下是一个示例代码，演示了如何在React中实现自动完成文本字段中的选定值：

import React, { useState } from 'react';

const AutocompleteTextField = () => {
  const [inputValue, setInputValue] = useState('');
  const [selectedValue, setSelectedValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleOptionSelect = (value) => {
    setSelectedValue(value);
  };

  const options = ['Option 1', 'Option 2', 'Option 3']; // 可以是从服务器获取的动态数据

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
      />
      {inputValue && (
        <ul>
          {options
            .filter((option) =>
              option.toLowerCase().includes(inputValue.toLowerCase())
            )
            .map((option) => (
              <li key={option} onClick={() => handleOptionSelect(option)}>
                {option}
              </li>
            ))}
        </ul>
      )}
      <p>Selected value: {selectedValue}</p>
    </div>
  );
};

export default AutocompleteTextField;

在上面的示例中，我们使用了两个状态变量inputValue和selectedValue来分别跟踪用户输入的值和选定的值。handleInputChange函数用于更新inputValue的值，handleOptionSelect函数用于更新selectedValue的值。

在渲染部分，我们使用<input>元素来创建文本字段，并使用value属性将其与inputValue状态绑定。我们还使用onChange事件监听用户输入的变化，并调用handleInputChange函数来更新inputValue的值。

在下拉菜单部分，我们使用条件渲染来根据用户输入和状态来显示或隐藏选项。只有当inputValue不为空时，才会渲染下拉菜单。我们使用filter方法来过滤出与用户输入匹配的选项，并使用map方法将它们渲染为<li>元素。当用户点击一个选项时，我们调用handleOptionSelect函数来更新selectedValue的值。

最后，我们在页面上显示选定的值，以便用户知道他们选择了哪个选项。

这只是一个简单的示例，你可以根据实际需求进行修改和扩展。如果你想了解更多关于React的信息，可以参考腾讯云的React产品文档：React - 腾讯云。