如何使用ReactJS动态创建可移除的标签与输入组件？

以下是基于HTML+CSS+JavaScript的完整实现方案，完全匹配你的需求：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态表单生成器</title>
    <style>
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background: #fff;
            padding: 24px;
            border-radius: 8px;
            width: 320px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .modal-content div {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .modal-content label {
            font-size: 14px;
            color: #333;
        }
        .modal-content input, .modal-content select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .modal-actions {
            flex-direction: row !important;
            justify-content: flex-end;
            gap: 10px;
        }
        .modal-actions button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #submit-field-btn {
            background: #0d6efd;
            color: #fff;
        }
        #cancel-btn {
            background: #eee;
            color: #333;
        }

        /* 表单容器与字段样式 */
        #add-field-btn {
            margin: 20px;
            padding: 10px 20px;
            background: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #form-container {
            margin: 0 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .form-group {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .form-group label {
            min-width: 100px;
            font-size: 14px;
        }
        .form-group input {
            flex: 1;
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .remove-btn {
            background: #dc3545;
            color: #fff;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="add-field-btn">添加表单字段</button>

    <!-- 字段配置弹窗 -->
    <div class="modal" id="field-modal">
        <div class="modal-content">
            <h3>配置新字段</h3>
            <div>
                <label>标签名称:</label>
                <input type="text" id="label-name" required>
            </div>
            <div>
                <label>输入类型:</label>
                <select id="input-type" required>
                    <option value="text">文本(text)</option>
                    <option value="number">数字(number)</option>
                    <option value="email">邮箱(email)</option>
                    <option value="password">密码(password)</option>
                </select>
            </div>
            <div class="modal-actions">
                <button id="cancel-btn">取消</button>
                <button id="submit-field-btn">提交</button>
            </div>
        </div>
    </div>

    <!-- 动态生成的表单容器 -->
    <div id="form-container"></div>

    <script>
        // 获取DOM节点
        const addBtn = document.getElementById('add-field-btn');
        const modal = document.getElementById('field-modal');
        const cancelBtn = document.getElementById('cancel-btn');
        const submitBtn = document.getElementById('submit-field-btn');
        const formContainer = document.getElementById('form-container');

        // 打开弹窗
        addBtn.addEventListener('click', () => {
            modal.style.display = 'flex';
        });

        // 关闭弹窗并清空输入
        const closeModal = () => {
            modal.style.display = 'none';
            document.getElementById('label-name').value = '';
        }
        cancelBtn.addEventListener('click', closeModal);
        window.addEventListener('click', (e) => e.target === modal && closeModal());

        // 提交生成字段
        submitBtn.addEventListener('click', () => {
            const labelName = document.getElementById('label-name').value.trim();
            const inputType = document.getElementById('input-type').value;

            if (!labelName) {
                alert('请填写标签名称');
                return;
            }

            // 创建表单组
            const formGroup = document.createElement('div');
            formGroup.className = 'form-group';

            // 创建标签
            const label = document.createElement('label');
            label.textContent = `${labelName}:`;

            // 创建输入框
            const input = document.createElement('input');
            input.type = inputType;
            input.name = labelName.toLowerCase().replace(/\s+/g, '-'); // 生成合法的name属性

            // 创建移除按钮
            const removeBtn = document.createElement('button');
            removeBtn.className = 'remove-btn';
            removeBtn.textContent = '移除';
            removeBtn.addEventListener('click', () => formContainer.removeChild(formGroup));

            // 组装并添加到容器
            formGroup.append(label, input, removeBtn);
            formContainer.appendChild(formGroup);

            // 关闭弹窗
            closeModal();
        });
    </script>
</body>
</html>

核心功能说明 #

1. 弹窗控制：点击"添加表单字段"按钮打开配置弹窗，支持点击取消按钮或弹窗外部关闭，自动清空输入内容
2. 字段生成：提交配置后，动态创建对应的标签、输入框和移除按钮，自动生成合法的name属性便于后续表单提交
3. 移除功能：每个生成的字段组都配有移除按钮，点击即可删除对应字段
4. 基础校验：判断标签名称是否为空，避免生成无效字段

可扩展方向 #

• 增加更多输入类型（如date、checkbox、textarea）
• 添加输入框占位符、必填标识等配置项
• 实现表单数据收集与提交逻辑
• 支持字段排序、编辑已生成字段配置

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