React实现一个带选择功能的输入框

可以使用 React 中的 `useState` 钩子来实现带选择功能的输入框。具体实现步骤如下：

1. 定义一个状态变量用于存储输入框中的文本，以及一个状态变量用于存储选择的选项。

const [inputText, setInputText] = useState('');
const [selectedOption, setSelectedOption] = useState(null);

2. 在输入框 `input` 元素中添加 `onChange` 事件监听器，每当输入框中的文本发生变化时，更新状态变量 `inputText` 的值。

<input
  type="text"
  value={inputText}
  onChange={(e) => setInputText(e.target.value)}
/>

3. 定义一个选项列表，每个选项都是一个 `button` 元素，点击时设置状态变量 `selectedOption` 的值为当前选项的文本。

<div>
  <button onClick={() => setSelectedOption('Option 1')}>
    Option 1
  </button>
  <button onClick={() => setSelectedOption('Option 2')}>
    Option 2
  </button>
  <button onClick={() => setSelectedOption('Option 3')}>
    Option 3
  </button>
</div>

4. 在 `input` 元素的下方显示当前选择的选项。

{selectedOption && <p>You have selected: {selectedOption}</p>}

5. 最终的代码如下所示：

import { useState } from 'react';

function SelectableInput() {
  const [inputText, setInputText] = useState('');
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <div>
      <input
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
      />
      <div>
        <button onClick={() => setSelectedOption('Option 1')}>
          Option 1
        </button>
        <button onClick={() => setSelectedOption('Option 2')}>
          Option 2
        </button>
        <button onClick={() => setSelectedOption('Option 3')}>
          Option 3
        </button>
      </div>
      {selectedOption && <p>You have selected: {selectedOption}</p>}
    </div>
  );
}

export default SelectableInput;