如何在表单Select组件中显示分类名称并传递分类ID至表单值

最优解决方案 #

你不需要用switch case来做名称到ID的映射，直接利用<option>的value属性就能完美解决问题：

修改后的代码如下：

<select placeholder='product category'
        name="product_category_id"
        value={formInput.product_category_id}
        onChange={handleFormInput}>
    {categories.map((category) =>(
        <option key={category.id} value={category.id}>{category.name}</option>
    ))}
</select>

关键说明： #

• 给每个<option>设置value={category.id}，用户选择分类时，表单字段product_category_id会直接获取该分类的ID作为值，无需额外处理。
• {category.name}依然作为option的显示文本，满足“展示分类名称”的需求。
• 添加key={category.id}是React列表渲染的规范要求，避免控制台警告。

如果你的handleFormInput是常规的表单更新函数（如下），就能直接把选中的ID存入formInput.product_category_id：

const handleFormInput = (e) => {
    setFormInput(prevState => ({
        ...prevState,
        [e.target.name]: e.target.value
    }));
};

这种方式完全替代了繁琐的switch case，逻辑清晰且代码简洁。

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