Next.js中无需onChange，如何获取下拉框未选中时的默认值？

解决办法 #

方法1：初始化状态时直接带入默认值

既然你已经有article.categoryName作为下拉框的默认值，那在初始化article状态时，直接把这个值包含进去，不用等onChange触发。示例：

// 假设用useState初始化状态
const [article, setArticle] = useState({
  // 其他表单字段...
  categoryName: 初始article数据.categoryName || ''
});

这样不管用户有没有手动选择下拉选项，article状态里的categoryName从一开始就有默认值，提交时自然能拿到。

方法2：提交时直接从DOM元素取值

不依赖状态同步，在提交函数里直接从表单的select元素获取当前选中值：

const handleSubmit = async (e) => {
  e.preventDefault();
  // 直接从表单元素中提取下拉框当前值
  const categoryName = e.target.elements['categoryName'].value;
  // 组装最终提交的数据
  const submitData = {
    ...article,
    categoryName
  };
  console.log('data', submitData);
};

这种方式完全不需要onChange处理器，不管是默认选中还是用户手动选择的选项，都能准确拿到当前值。

为什么原写法会出现空值？

defaultValue只是让下拉框渲染时选中对应选项，但React不会自动把这个默认值同步到状态里——只有用户触发onChange事件时，你的状态才会更新。所以没手动选择时，article里的categoryName还是初始的空值。

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