如何管理多个动态新增dropdown的状态并将选中值存入同一数组

状态设计核心思路 #

直接用一个一维数组管理所有下拉框的选中值即可，数组的索引和页面中下拉框的顺序一一对应，数组长度等于当前下拉框的总数量，不需要为每个下拉框单独声明状态。如果需要标识未选择的状态，默认值可以设为null/undefined/空字符串。

具体实现逻辑（以React为例，其他框架思路完全一致） #

1. 定义公共常量和状态 #

// 所有下拉框共用的可选选项，固定值可提前声明在组件外部
const DROPDOWN_OPTIONS = [
  { label: "选项1", value: "opt1" },
  { label: "选项2", value: "opt2" },
  { label: "选项3", value: "opt3" }
]

// 状态数组直接存储所有下拉框的选中值，初始为空数组
const [selectedList, setSelectedList] = useState([])

2. Add按钮点击逻辑 #

每次点击新增下拉框时，只需要往状态数组末尾追加一个默认未选值即可：

const handleAddDropdown = () => {
  // 新增的下拉框默认未选择，这里用null作为占位标识
  setSelectedList(prev => [...prev, null])
}

3. 下拉框选中修改逻辑 #

通过下标定位需要修改的数组元素，更新对应位置的选中值：

const handleSelectChange = (dropdownIndex, newSelectedValue) => {
  setSelectedList(prev => {
    const newList = [...prev]
    newList[dropdownIndex] = newSelectedValue
    return newList
  })
}

4. 视图渲染逻辑 #

遍历状态数组，每一项对应渲染一个下拉框，绑定对应下标的修改事件：

return (
  <div className="container">
    <button onClick={handleAddDropdown}>add</button>
    {selectedList.map((selectedVal, index) => (
      <select
        key={index}
        value={selectedVal ?? ""}
        onChange={e => handleSelectChange(index, e.target.value)}
        style={{ display: "block", margin: "8px 0" }}
      >
        <option value="">请选择选项</option>
        {DROPDOWN_OPTIONS.map(opt => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    ))}
  </div>
)

额外适配说明 #

• 如果需要支持删除单个下拉框，只需要写一个删除方法，传入要删除的下标，从状态数组中移除对应位置的元素即可，视图会自动同步更新
• 提交数据时可以直接使用selectedList数组，所有选中值已经按顺序存在该数组中，不需要额外做收集操作
• 如果你的业务需要给每个下拉框加唯一标识，也可以把数组元素改成对象格式，比如{ id: 随机唯一值, value: 选中值 }，避免用index作为key出现渲染异常的问题

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