ReactJS如何实现动态select仅首个自动生成其余点击新增按钮生成

需求要点 #

• 初始仅自动渲染1个无新增按钮的下拉选择器（Select）
• 所有额外的动态Select需点击新增按钮后才生成，不自动批量生成
• 除首个Select外，其余所有动态生成的Select均配套显示新增按钮

完整实现代码 #

import React, { useState } from 'react';
import { Select, Button } from 'antd';
import 'antd/dist/antd.css';

const { Option } = Select;

// 下拉选项可根据业务需求替换为接口返回数据
const selectOptions = [
  { value: 'opt1', label: '选项1' },
  { value: 'opt2', label: '选项2' },
  { value: 'opt3', label: '选项3' },
];

export default function DynamicSelectGroup() {
  // 存储当前已生成的Select数量，初始值为1对应首个默认生成的Select
  const [selectNum, setSelectNum] = useState(1);

  // 点击新增按钮触发，新增一个Select
  const addSelectHandler = () => {
    setSelectNum(prevCount => prevCount + 1);
  };

  return (
    <div style={{ padding: '24px' }}>
      {Array.from({ length: selectNum }).map((_, index) => (
        <div key={index} style={{ marginBottom: '12px', display: 'flex', gap: '8px', alignItems: 'center' }}>
          <Select
            style={{ width: '220px' }}
            placeholder={`请选择第${index + 1}项`}
          >
            {selectOptions.map(item => (
              <Option key={item.value} value={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
          {/* 非首个Select显示新增按钮，可根据需求调整是否保留所有新增按钮或仅最后一个显示 */}
          {index !== 0 && <Button type="primary" onClick={addSelectHandler}>新增</Button>}
        </div>
      ))}
      {/* 首个Select对应的新增按钮放在列表末尾，避免首个Select旁出现按钮 */}
      {selectNum === 1 && <Button type="primary" onClick={addSelectHandler}>新增</Button>}
    </div>
  );
}

逻辑说明 #

• 初始化时仅渲染1个默认Select，无多余元素生成
• 首次点击新增按钮后生成第二个Select，该Select自带新增按钮
• 后续所有新增的Select都会自带新增按钮，点击任意新增按钮都可生成下一个Select
• 可自行扩展删除、数据绑定、联动选择等业务功能

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