Material Tailwind Select含跳转Option时选中项不显示问题求助

问题根因 #

你那个「Add New Brand」的<Option>没有设置value属性。Material Tailwind的Select组件是通过**匹配Select的value和Option的value**来确定选中状态的，这个无value的Option干扰了组件的匹配逻辑，导致下方带value的品牌选项选中后无法正常显示。

解决方案 #

1. 给跳转用的Option添加一个唯一的特殊value（比如"add-new"），确保不会和品牌的_id重复
2. 在Select的onChange事件里判断选中值：如果是特殊value就执行跳转，否则正常更新brandId
3. 保证Select的初始值不会等于这个特殊value，避免默认选中跳转选项

修改后的代码示例 #

<Select
  label="Brand"
  name="brandId"
  value={data?.brandId?._id || data?.brandId}
  size="lg"
  onChange={(value) => {
    if (value === "add-new") {
      navigate("/stock/brands/");
    } else {
      handleChange(value, "brandId");
    }
  }}
>
  <Option value="add-new">Add New Brand</Option>
  {brands.map((item) => (
    <Option value={item._id} key={item._id}>
      {item.name}
    </Option>
  ))}
</Select>

额外说明 #

别直接给Option绑定onClick事件，这会和Select组件内部的选择逻辑冲突，改用onChange判断选中值来处理跳转才是正确的做法。

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