React中表格列的添加与克隆功能修复求助

功能需求 #

• 点击Flow Data列内的ADD按钮，新增一个带空输入框的列
• 点击clone按钮，克隆当前Flow Data列（包含已有输入值）

问题分析与修复步骤 #

原代码未通过状态正确管理列集合，导致新增、克隆逻辑无法生效。以下是修复实现：

1. 用状态数组维护列数据：每列存储唯一标识和输入值，保证渲染与更新的一致性
2. 实现ADD逻辑：向数组追加空输入项
3. 实现clone逻辑：复制Flow Data列的当前输入值，生成新列加入数组
4. 绑定输入框 onChange 事件：实时更新对应列的输入值

修复后的代码 #

import { useState } from 'react';
import './App.css';

function App() {
  // 初始化列数据，包含默认的Flow Data列
  const [columns, setColumns] = useState([
    { id: 'flow-1', value: '', label: 'Flow Data' },
  ]);

  // 新增空列
  const handleAddColumn = () => {
    const newId = `col-${Date.now()}`;
    setColumns(prev => [...prev, { id: newId, value: '', label: `Column ${prev.length + 1}` }]);
  };

  // 克隆Flow Data列（取第一个默认列的值）
  const handleCloneColumn = () => {
    const flowColumn = columns.find(col => col.label === 'Flow Data');
    if (flowColumn) {
      const newId = `clone-${Date.now()}`;
      setColumns(prev => [...prev, { id: newId, value: flowColumn.value, label: `Cloned Flow ${prev.length}` }]);
    }
  };

  // 更新输入框值
  const handleInputChange = (id, value) => {
    setColumns(prev => prev.map(col => col.id === id ? { ...col, value } : col));
  };

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            {columns.map(col => (
              <th key={col.id}>
                {col.label}
                {/* 仅在Flow Data列显示按钮 */}
                {col.label === 'Flow Data' && (
                  <div>
                    <button onClick={handleAddColumn}>ADD</button>
                    <button onClick={handleCloneColumn}>clone</button>
                  </div>
                )}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          <tr>
            {columns.map(col => (
              <td key={col.id}>
                <input
                  type="text"
                  value={col.value}
                  onChange={(e) => handleInputChange(col.id, e.target.value)}
                  placeholder="Enter value"
                />
              </td>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default App;

说明 #

• 用id作为每列的key，确保React能正确识别列的变化
• 使用函数式更新setColumns(prev => ...)，避免状态更新依赖旧值的问题
• 仅在默认的Flow Data列显示操作按钮，贴合需求场景
• 克隆时会复制原Flow Data列的当前输入值，新增列则为空白输入框

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