如何在Next.js中为下拉框选项设置选中条件

直接给目标选项的selected属性添加条件判断，对比用户已选的post?.cat_name和当前选项的value是否一致即可：

<select className="form-control" name="cat_name" id="cat_name">
    <option value="">Select Category</option>
    <option value="pined" selected={post?.cat_name === 'pined'}>Pined</option>
</select>

如果后续需要添加更多分类选项，推荐用数组遍历的方式实现，这样更易维护：

// 先定义分类列表
const categoryList = [
  { value: '', label: 'Select Category' },
  { value: 'pined', label: 'Pined' },
  // 可继续添加其他分类项
];

// 渲染下拉框
<select className="form-control" name="cat_name" id="cat_name">
  {categoryList.map(item => (
    <option
      key={item.value}
      value={item.value}
      selected={post?.cat_name === item.value}
    >
      {item.label}
    </option>
  ))}
</select>

这种方式不用给每个选项单独写判断逻辑，后续新增或修改分类时，只需要调整categoryList数组即可。

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