NextJS中使用Combo box（组合框）的最简实现方式是什么？

如果只需要基础的下拉选择功能，原生HTML <select> 就是最轻量化的方案，完全不需要额外依赖：

1. 无状态原生实现 #

直接在组件里用<select>标签，适合不需要处理选中逻辑的简单场景：

export default function SimpleComboBox() {
  return (
    <div>
      <label htmlFor="basic-options">选择选项：</label>
      <select id="basic-options" defaultValue="option1">
        <option value="option1">选项 1</option>
        <option value="option2">选项 2</option>
        <option value="option3">选项 3</option>
      </select>
    </div>
  );
}

2. 带状态控制的实现 #

如果需要实时获取选中值、处理交互逻辑，用React的useState绑定即可，这是原生方案里带逻辑的最简写法：

'use client'; // NextJS 13+ App Router 必须加这个指令
import { useState } from 'react';

export default function ControlledComboBox() {
  const [selectedVal, setSelectedVal] = useState('option1');

  const handleSelect = (e) => {
    setSelectedVal(e.target.value);
    // 这里可以加选中后的逻辑，比如提交表单、更新其他状态等
  };

  return (
    <div>
      <label htmlFor="controlled-options">选择选项：</label>
      <select
        id="controlled-options"
        value={selectedVal}
        onChange={handleSelect}
      >
        <option value="option1">选项 1</option>
        <option value="option2">选项 2</option>
        <option value="option3">选项 3</option>
      </select>
      <p>当前选中：{selectedVal}</p>
    </div>
  );
}

注意事项 #

• NextJS 13+ 的 App Router 环境下，使用useState这类客户端钩子必须添加'use client'指令，否则会报错。
• 如果需要搜索过滤、自定义下拉样式这类复杂功能，才考虑用第三方库，但那已经不属于“最简”范畴了。

内容的提问来源于stack exchange，提问作者Michel