ReactJS中将自动生成动态select改为按钮触发的问题咨询

修改思路 #

• 取消原有select值变更自动生成下一级下拉框的联动逻辑
• 每个渲染出来的select组件右侧配套一个新增按钮，按钮可交互状态跟随当前select选中值动态变化：
  • 当前选中值 < input输入的总最大值：按钮可点击
  • 当前选中值 = 总最大值：按钮隐藏，无法触发新增
• 点击对应select的新增按钮时，才向下拉框渲染列表中新增下一级select，下一级select的可选值范围为「当前select选中值+1」到总最大值
• 所有已生成的select值变更时，仅更新自身值和对应按钮状态，不会自动删除或新增后续select，可根据业务需求自行补充调整逻辑

核心实现代码（React） #

import { useState } from "react";
import "./styles.css";

export default function App() {
  // 输入的总最大值
  const [maxNum, setMaxNum] = useState(0);
  // 存储所有select的选中值
  const [selectedList, setSelectedList] = useState([]);

  // 处理input输入变更
  const handleMaxChange = (e) => {
    const val = Number(e.target.value);
    setMaxNum(val);
    // 输入值变更时清空已有选择，生成第一个空select占位
    setSelectedList(val > 0 ? [undefined] : []);
  };

  // 处理单个select值变更
  const handleSelectChange = (index, val) => {
    const newSelected = [...selectedList];
    newSelected[index] = Number(val);
    setSelectedList(newSelected);
  };

  // 点击按钮新增下一级select
  const handleAddNext = (currentIndex) => {
    const currentVal = selectedList[currentIndex];
    // 边界校验，选中值为空或已到最大值时不新增
    if (!currentVal || currentVal >= maxNum) return;
    const newSelected = [...selectedList];
    // 新增下一级选中位初始值为undefined
    newSelected.push(undefined);
    setSelectedList(newSelected);
  };

  // 生成当前select的可选选项
  const getOptions = (index) => {
    if (index === 0) {
      return Array.from({ length: maxNum }, (_, i) => i + 1);
    }
    const preVal = selectedList[index - 1];
    if (!preVal) return [];
    return Array.from({ length: maxNum - preVal }, (_, i) => preVal + 1 + i);
  };

  return (
    <div className="App">
      <div>
        <label>输入最大值：</label>
        <input type="number" min="1" value={maxNum || ""} onChange={handleMaxChange} />
      </div>
      <div className="select-wrap">
        {selectedList.map((item, index) => {
          const options = getOptions(index);
          // 仅最后一级select且未选到最大值时显示新增按钮
          const canAddNext = selectedList[index] && selectedList[index] < maxNum && index === selectedList.length - 1;
          return (
            <div key={index} className="select-item">
              <select
                value={item || ""}
                onChange={(e) => handleSelectChange(index, e.target.value)}
              >
                <option value="">请选择</option>
                {options.map((opt) => (
                  <option key={opt} value={opt}>{opt}</option>
                ))}
              </select>
              {canAddNext && (
                <button onClick={() => handleAddNext(index)}>添加下一级选择</button>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

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