ReactJS 实现点击+按钮触发动态select生成及选择联动功能咨询

核心调整思路 #

• 保留原有动态select的基础渲染逻辑，新增「手动点击+按钮新增」的触发入口
• 优化select选中联动逻辑：仅当选中当前最后一个select的数字选项时，才自动生成下一级select，避免中间select修改时重复生成多余选项

具体代码实现 #

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

export default function App() {
  const [inputVal, setInputVal] = useState("");
  // 存储所有动态select的选中值
  const [selectList, setSelectList] = useState([]);

  // 生成select的选项，可根据实际业务调整选项内容
  const getSelectOptions = () => {
    return [
      { label: "请选择", value: "" },
      { label: "1", value: 1 },
      { label: "2", value: 2 },
      { label: "3", value: 3 },
      { label: "非数字选项", value: "other" }
    ];
  };

  // 手动点击+号新增select
  const handleAddSelect = () => {
    setSelectList([...selectList, ""]);
  };

  // select值变更逻辑
  const handleSelectChange = (index, val) => {
    const newSelectList = [...selectList];
    newSelectList[index] = val;
    setSelectList(newSelectList);

    // 触发自动新增的条件：1、选中值为数字 2、当前修改的是最后一个select
    if (!isNaN(Number(val)) && index === selectList.length - 1) {
      setSelectList([...newSelectList, ""]);
    }
  };

  // 输入框输入完成后生成第一个select
  const handleInputConfirm = () => {
    if (inputVal && selectList.length === 0) {
      setSelectList([""]);
    }
  };

  return (
    <div className="App">
      <div className="input-wrap">
        <input
          value={inputVal}
          onChange={(e) => setInputVal(e.target.value)}
          placeholder="输入内容后生成第一个下拉框"
        />
        <button onClick={handleInputConfirm}>确认生成</button>
      </div>

      <div className="select-list">
        {selectList.map((item, index) => (
          <div key={index} className="select-item" style={{ margin: "8px 0" }}>
            <select
              value={item}
              onChange={(e) => handleSelectChange(index, e.target.value)}
              style={{ marginRight: "8px" }}
            >
              {getSelectOptions().map((opt) => (
                <option key={opt.value} value={opt.value}>
                  {opt.label}
                </option>
              ))}
            </select>
            {/* 每个select后面加+按钮 */}
            <button onClick={handleAddSelect}>+</button>
          </div>
        ))}
      </div>
    </div>
  );
}

关键逻辑说明 #

• 手动新增：每个select右侧都配置了+按钮，点击直接往selectList数组追加空项即可渲染新的select
• 自动联动新增：只有当前操作的是列表里最后一个select，且选中值为数字时，才会自动生成下一个select，既保留了联动逻辑，也不会出现中间select修改生成多余项的问题
• 初始触发：输入框输入内容确认后生成第一个select，和原有逻辑保持一致

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