如何使用react写一个弹出框选择内容渲染到input框

你可以按照以下步骤使用 React 实现一个弹出框选择内容并渲染到 input 框：

1. 创建一个组件，比如 `SelectBox`，用于显示弹出框和选择内容。
2. 在组件中定义一个输入框和一个按钮，点击按钮可以打开弹出框。
3. 在弹出框中显示可选的内容列表，比如使用 `<ul>` 和 `<li>` 标签。
4. 点击弹出框中的列表项时，将选中的内容保存到组件状态中。
5. 在输入框中显示选中的内容，使用组件状态中保存的值作为输入框的值。

以下是一个简单的示例代码：

import React, { useState } from 'react';

function SelectBox() {
  const [selectedValue, setSelectedValue] = useState('');
  const [isBoxOpen, setIsBoxOpen] = useState(false);
  const options = ['Option 1', 'Option 2', 'Option 3'];

  function handleInputChange(event) {
    setSelectedValue(event.target.value);
  }

  function handleBoxToggle() {
    setIsBoxOpen(!isBoxOpen);
  }

  function handleOptionClick(option) {
    setSelectedValue(option);
    setIsBoxOpen(false);
  }

  return (
    <div>
      <input type="text" value={selectedValue} onChange={handleInputChange} />
      <button onClick={handleBoxToggle}>Select</button>
      {isBoxOpen && (
        <ul>
          {options.map(option => (
            <li key={option} onClick={() => handleOptionClick(option)}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default SelectBox;

在这个示例中，我们使用了 `useState` hook 来保存组件状态。`selectedValue` 变量保存输入框中的值，`isBoxOpen` 变量保存弹出框是否打开。

在 `handleInputChange` 函数中，我们更新 `selectedValue` 变量以反映输入框中的值的更改。

在 `handleBoxToggle` 函数中，我们切换 `isBoxOpen` 变量的值以打开或关闭弹出框。

在弹出框中，我们使用 `options.map()` 函数将选项列表映射到 `<li>` 标签上，并在点击选项时调用 `handleOptionClick` 函数来更新选中的值和关闭弹出框。

在输入框中，我们使用 `selectedValue` 变量作为输入框的值来显示选中的内容。