React Select下拉框设置默认值并动态追加剩余选项的实现

核心问题分析 #

1. 无法选择其他选项：你的select组件name属性是uom，但formData中对应的字段是uom1，导致handleInputChange更新的是formData.uom而非绑定的formData.uom1，下拉框的value始终保持初始设置的默认值，无法响应选择变化。
2. 默认值前置需求：需要将选中的产品uom值作为第一个选项，后续追加UnitMasterData中的剩余选项。

解决方案 #

1. 修复select的name属性 #

将select的name改为uom1，确保和formData中的字段名一致，这样选择变化能正确更新状态：

<select className="form-select" id="id-uom" name="uom1" value={formData.uom1} onChange={handleInputChange}>

2. 动态排序下拉选项 #

创建一个处理选项排序的逻辑，当编辑状态下formData.uom1有值时，将匹配的选项放在最前面，其余选项按原顺序追加：

// 在return中处理选项数组
const sortedUnitOptions = formData.uom1 
  ? [
      ...UnitMasterData.filter(item => item.unitname === formData.uom1),
      ...UnitMasterData.filter(item => item.unitname !== formData.uom1)
    ]
  : UnitMasterData;

然后将map遍历的数组换成sortedUnitOptions，同时给option添加key属性符合React规范：

{sortedUnitOptions.map((umd) => (
  <option key={umd.unitname} value={umd.unitname}>
    {umd.unitname}
  </option>
))}

完整修改后的select组件代码 #

<div className="col-md-4">
  <label htmlFor="id-uom" className="form-label">UOM</label>
  {/** 处理选项排序 */}
  {(() => {
    const sortedUnitOptions = formData.uom1 
      ? [
          ...UnitMasterData.filter(item => item.unitname === formData.uom1),
          ...UnitMasterData.filter(item => item.unitname !== formData.uom1)
        ]
      : UnitMasterData;
    return (
      <select className="form-select" id="id-uom" name="uom1" value={formData.uom1} onChange={handleInputChange}>
        {sortedUnitOptions.map((umd) => (
          <option key={umd.unitname} value={umd.unitname}>
            {umd.unitname}
          </option>
        ))}
      </select>
    )
  })()}
</div>

额外小优化 #

在getdatabyrecordarray函数中，operationtype1的值应该是'Edit Product'而非'Edit Customer'，修正语义错误：

function getdatabyrecordarray(record) {
  setFormData({
    productid1: record.productid,
    product_name1: record.product_name,
    product_category1: record.product_category,
    uom1: record.uom,
    purchase_rate1: record.purchase_rate,
    sales_rate1: record.sales_rate,
    mrp1: record.mrp,
    opqty1: record.opqty,
    clqty1: record.clqty,
    status1: record.status,
    operationtype1: 'Edit Product' // 修正此处
  });
}

内容的提问来源于stack exchange，提问作者Mr . Pvg