如何将动态表单建模为React Component？求实现代码

嘿，我来帮你搞定这个动态表单的需求！下面分两部分解答你的问题，再附上完整的实现代码：

1. 如何将该表单建模为React Component？ #

我们可以用React函数组件+useState钩子来构建这个表单：

• 用一个数组状态inputs来管理所有输入项，每个输入项包含唯一id（用于区分不同输入框）和value（存储输入内容）；
• 组件结构分为三个核心部分：表单容器、动态渲染的输入项列表、添加按钮；
• 把输入项的渲染逻辑用map遍历数组实现，每个输入框绑定对应的状态更新函数。

2. 如何为组件添加动态性？ #

动态添加输入框的核心逻辑很简单：

• 点击「+ Add」按钮时，调用状态更新函数，往inputs数组里追加一个新的空输入项（用Date.now()生成临时唯一id，避免重复）；
• 为每个输入框绑定onChange事件，根据输入项的id精准更新对应项的value，确保每个输入框的内容都能正确同步到状态中；
• 还可以额外添加删除功能（可选），当输入项数量大于1时，显示删除按钮，点击后从数组中移除对应项。

完整实现代码 #

下面是可直接运行的完整组件代码，包含了添加、删除、输入同步和表单提交功能：

import { useState } from 'react';

const DynamicForm = () => {
  // 初始化一个空输入项
  const [inputs, setInputs] = useState([
    { id: Date.now(), value: '' }
  ]);

  // 点击添加按钮时，新增空输入项
  const handleAddInput = () => {
    setInputs(prevInputs => [...prevInputs, { id: Date.now(), value: '' }]);
  };

  // 更新指定id的输入项内容
  const handleInputChange = (id, newValue) => {
    setInputs(prevInputs => 
      prevInputs.map(input => 
        input.id === id ? { ...input, value: newValue } : input
      )
    );
  };

  // 删除指定id的输入项（仅当输入项数量>1时显示删除按钮）
  const handleDeleteInput = (id) => {
    setInputs(prevInputs => prevInputs.filter(input => input.id !== id));
  };

  // 表单提交逻辑（可根据需求修改）
  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里可以把表单数据提交到后端，或者做其他处理
    console.log('最终表单数据:', inputs.map(item => item.value));
  };

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: '400px', margin: '2rem auto', padding: '0 1rem' }}>
      {/* 动态渲染输入项 */}
      {inputs.map(input => (
        <div key={input.id} style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
          <input
            type="text"
            value={input.value}
            onChange={(e) => handleInputChange(input.id, e.target.value)}
            placeholder="输入内容..."
            style={{ flex: 1, padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px' }}
          />
          {inputs.length > 1 && (
            <button
              type="button"
              onClick={() => handleDeleteInput(input.id)}
              style={{ padding: '0.5rem 1rem', backgroundColor: '#dc3545', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
            >
              删除
            </button>
          )}
        </div>
      ))}

      {/* 添加按钮 */}
      <button
        type="button"
        onClick={handleAddInput}
        style={{ padding: '0.5rem 1rem', backgroundColor: '#007bff', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', marginBottom: '1rem' }}
      >
        + Add
      </button>

      {/* 提交按钮 */}
      <button
        type="submit"
        style={{ padding: '0.5rem 1rem', backgroundColor: '#28a745', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
      >
        提交表单
      </button>
    </form>
  );
};

export default DynamicForm;

代码说明： #

• 用Date.now()生成唯一id，简单且满足基础需求；如果是生产环境，也可以用uuid库生成更可靠的唯一标识；
• 状态更新都用了函数式更新（prevInputs => ...），确保每次都基于最新的状态进行修改；
• 内置了基础的样式，你可以根据自己的需求替换成CSS类或者CSS-in-JS方案；
• 表单提交逻辑可以根据实际需求修改，比如对接API接口。

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