React类组件中如何实现点击按钮重复添加表单组件并取值校验

核心逻辑 #

将原本单条静态的地址块，重构为数组结构存储的动态列表：点击按钮时向数组追加新的空对象实现块新增，遍历数组完成批量渲染，所有输入值、校验错误通过数组索引和块一一对应，最终通过遍历数组完成批量值收集与统一校验。

第一步：重构组件状态 #

将原本存储单个地址的input、errors结构，替换为和动态块严格索引对齐的数组结构：

// 组件初始状态定义
this.state = {
  // 存储所有地址块的输入值，每个元素对应一个独立块的三个输入字段
  branches: [
    { address1: '', address2: '', address3: '' } // 初始默认渲染第一个块
  ],
  // 存储每个地址块对应的校验错误，索引和branches完全对齐
  branchErrors: [
    { address1: '', address2: '', address3: '' }
  ]
}

第二步：实现新增块方法 #

替换原有appendDiv方法，遵循React状态不可变更新原则，点击按钮时向数组尾部追加新的空块：

appendDiv = () => {
  this.setState(prevState => ({
    // 复制原数组后追加空地址对象，不直接修改原state
    branches: [
      ...prevState.branches,
      { address1: '', address2: '', address3: '' }
    ],
    // 同步追加对应空错误对象，保证索引对齐
    branchErrors: [
      ...prevState.branchErrors,
      { address1: '', address2: '', address3: '' }
    ]
  }))
}

第三步：实现动态输入绑定 #

新增适配动态块的输入处理方法，替换原有handleChange，确保输入时能精准定位到当前修改的块索引和字段：

handleBranchInputChange = (branchIndex, e) => {
  const { name, value } = e.target
  this.setState(prevState => {
    // 复制原分支数组和错误数组，满足React不可变更新要求
    const updatedBranches = [...prevState.branches]
    const updatedErrors = [...prevState.branchErrors]
    // 更新对应索引位置的字段值
    updatedBranches[branchIndex] = {
      ...updatedBranches[branchIndex],
      [name]: value
    }
    // 输入时自动清空对应字段的错误提示
    updatedErrors[branchIndex] = {
      ...updatedErrors[branchIndex],
      [name]: ''
    }
    return {
      branches: updatedBranches,
      branchErrors: updatedErrors
    }
  })
}

// 适配动态块的地图选点回填方法，替换原有mapFunctionHere逻辑
handleMapSelect = (branchIndex, selectedAddress) => {
  this.setState(prevState => {
    const updatedBranches = [...prevState.branches]
    updatedBranches[branchIndex] = {
      ...updatedBranches[branchIndex],
      address3: selectedAddress
    }
    const updatedErrors = [...prevState.branchErrors]
    updatedErrors[branchIndex] = { ...updatedErrors[branchIndex], address3: '' }
    return {
      branches: updatedBranches,
      branchErrors: updatedErrors
    }
  })
}

第四步：改造渲染逻辑 #

将原本静态的地址块代码，替换为遍历branches数组的动态渲染结构，所有输入的value、事件绑定、错误提示都关联当前遍历的块索引：

{/* 动态渲染所有地址块，因块仅在末尾追加，使用索引作为key无渲染问题 */}
{this.state.branches.map((branch, index) => (
  <div key={index} className="branch-block">
    <div className="form-group">
      <label>Store Address</label>
      <input type="text"
             value={branch.address1}
             onChange={(e) => this.handleBranchInputChange(index, e)}
             className="form-control code" 
             name="address1" 
             placeholder="Pincode" />   
      <span className="form-text" id="errtext">{this.state.branchErrors[index].address1}</span>                                             
    </div>
    <div className="form-group">
      <div className="row">
        <div className="col">
          <input type="text" className="form-control code"
                 value={branch.address2}
                 onChange={(e) => this.handleBranchInputChange(index, e)}
                 name="address2" 
                 placeholder="address" />
          <span className="form-text" id="errtext">{this.state.branchErrors[index].address2}</span>
        </div>
        <div className="col-md-auto">
          <p style={{margin:"5px"}}>and</p>
        </div>
        <div className="col">
          {/* 地图组件绑定当前块索引，选点后回填对应块的address3 */}
          <SimpleModal 
            className="form-control" 
            mapFunctionHere={(address) => this.handleMapSelect(index, address)} 
          />   
        </div>
      </div>                
    </div>
    <div className="form-group">                                               
      <input type="text"
             className="form-control code"
             value={branch.address3}
             onChange={(e) => this.handleBranchInputChange(index, e)}
             name="address3" 
             placeholder="address" 
             readOnly />     
      <span className="form-text" id="errtext">{this.state.branchErrors[index].address3}</span>           
    </div>
  </div>
))}
{/* 新增按钮保持原有逻辑不变 */}
<input 
  type="button" 
  className="addbranch"  
  onClick={this.appendDiv} 
  value="Add Branch" 
/>

第五步：实现批量收集与统一校验 #

编写统一校验方法，遍历所有块完成规则校验，同时收集所有块的输入值用于提交：

validateAndCollectBranches = () => {
  let isAllValid = true
  const collectedFormData = []
  // 遍历所有块生成对应校验错误
  const nextErrors = this.state.branches.map((branch, blockIndex) => {
    const errorTemplate = { address1: '', address2: '', address3: '' }
    // 示例校验规则1：Pincode必填且为6位数字
    if (!branch.address1.trim()) {
      errorTemplate.address1 = 'Pincode不能为空'
      isAllValid = false
    } else if (!/^\d{6}$/.test(branch.address1.trim())) {
      errorTemplate.address1 = 'Pincode需为6位数字'
      isAllValid = false
    }
    // 示例校验规则2：详细地址必填
    if (!branch.address2.trim()) {
      errorTemplate.address2 = '详细地址不能为空'
      isAllValid = false
    }
    // 示例校验规则3：地图选点地址必填
    if (!branch.address3.trim()) {
      errorTemplate.address3 = '请通过地图选择对应地址'
      isAllValid = false
    }
    // 收集当前块的合法数据
    collectedFormData.push({
      blockIndex,
      pincode: branch.address1.trim(),
      detailAddress: branch.address2.trim(),
      mapAddress: branch.address3.trim()
    })
    return errorTemplate
  })
  // 将校验错误同步到state，在页面展示对应提示
  this.setState({ branchErrors: nextErrors })
  // 返回校验结果和全量收集的数据
  return {
    isAllValid,
    data: collectedFormData
  }
}

调用校验方法时，若返回的isAllValid为true，可直接将data数组提交给后端；若为false，页面会自动展示每个块对应的错误提示，无需额外处理。

可选扩展 #

如果需要支持删除单块，只要在每个块的渲染结构中添加删除按钮，点击时过滤掉数组中对应索引的元素即可，数组更新逻辑和新增块的逻辑完全一致。

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