const {contactpenlist} = this.state
//添加联系人列表
const contactlist = contactpenlist.map((elem,index)=>(
<Card title ='联系人' key={index} extra={<a onClick ={()=>this.delcontact(index)} >删除</a>} style={{ marginTop: 10 }}>
<FormItem label="类型" {...formItemLayout} >
getFieldDecorator(`contactType${index}`, {
initialValue: '',
rules: [
required: true,
message: '联系类型不能为空'
<Input placeholder="联系类型不能为空" />
</FormItem>
<FormItem label="姓名" {...formItemLayout} >
getFieldDecorator(`name${index}`, {
initialValue: '',
rules: [
required: true,
message: '联系类型不能为空'
<Input placeholder="联系类型不能为空" />
</FormItem>
<FormItem label="电话" {...formItemLayout} >
getFieldDecorator(`phone${index}`, {
initialValue: '',
rules: [
required: true,
message: '联系类型不能为空'
<Input placeholder="联系类型不能为空" />
</FormItem>
<FormItem label="职务" {...formItemLayout} >
getFieldDecorator(`duties${index}`, {
initialValue: '',
rules: [
required: true,
message: '联系类型不能为空'
<Input placeholder="联系类型不能为空" />
</FormItem>
<FormItem label="地址" {...formItemLayout} >
getFieldDecorator(`address${index}`, {
initialValue: '',
rules: [
required: true,
message: '联系类型不能为空'
<Input placeholder="联系类型不能为空" />
</FormItem>
<FormItem label="所属公司" {...formItemLayout} >
getFieldDecorator(`department${index}`, {
initialValue: '',
rules: [
required: true,
message: '联系类型不能为空'
<Input placeholder="联系类型不能为空" />
</FormItem>
</Card>
// <div key={index} className="contactitem">
// {/* <p><Button style={{float:"right"}}>删除</Button></p> */}
// </div>
Form表单的整体代码
<Form layout="horizontal">
<FormItem label="公司名称" {...formItemLayout}>
getFieldDecorator('companyName', {
initialValue: '',
rules: [
required: true,
message: '用户名不能为空'
<Input placeholder="请输入公司名称" />
</FormItem>
<FormItem label="客户来源" {...formItemLayout}>
{getFieldDecorator('customSource', {
rules: [{ required: true, message: '客户来源不能为空' }],
<Select placeholder="请输入客户来源">
this.state.customerelist.map((item, id) => (
<Option key={item.id} value= {item.id}>{item.name}</Option>
</Select>,
</FormItem>
<FormItem label="公司性质" {...formItemLayout}>
{getFieldDecorator('companyNature', {
rules: [{ required: true, message: '公司性质是必选项' }],
<Select placeholder="请选择公司性质">
this.state.companyxzlist.map((item, id) => (
<Option key={item.id} value= {item.id}>{item.name}</Option>
{/* <Option value="xiao">Xiaoxiao Fu</Option>
<Option value="mao">Maomao Zhou</Option> */}
</Select>,
</FormItem>
<FormItem label="客户类型" {...formItemLayout}>
{getFieldDecorator('customType', {
rules: [{ required: true, message: '客户类型为必选项' }],
<Select placeholder="请选择客户类型">
{/* <Option value="xiao">租户</Option>
<Option value="mao">总包</Option> */}
this.state.customelxlist.map((item, id) => (
<Option key={item.id} value= {item.id}>{item.Name}</Option>
</Select>,
</FormItem>
<FormItem label="行业分类" {...formItemLayout}>
{getFieldDecorator('industryClass', {
rules: [{ required: true, message: '行业分类不能为空' }],
<Select placeholder="请输入行业分类">
this.state.hycategorylist.map((item, id) => (
<Option key={item.id} value= {item.id}>{item.name}</Option>
{/* <Option value="xiao">民营</Option>
<Option value="mao">个体户</Option> */}
</Select>,
</FormItem>
<FormItem label="客户省份" {...formItemLayout}>
{getFieldDecorator('customProvince', {
rules: [{ required: true, message: '客户省份为必选项' }],
<Select placeholder="请选择客户省份" onChange = {this.cmproviceChange}>
this.state.cmprovicelist.map((item, id) => (
<Option key={item.id} value= {item.id}>{item.Name}</Option>
{/* <Option value="xiao">租户</Option>
<Option value="mao">总包</Option> */}
</Select>,
</FormItem>
<FormItem label="客户城市" {...formItemLayout}>
{getFieldDecorator('customCity', {
rules: [{ required: true, message: '客户城市为必选项' }],
<Select placeholder="请选择客户城市">
{/* <Option value="private">Private</Option>
<Option value="public">Public</Option> */}
this.state.cmcitylist.map((item, id) => (
<Option key={item.id} value= {item.id}>{item.name}</Option>
</Select>,
</FormItem>
<FormItem label="项目名称" {...formItemLayout}>
getFieldDecorator('projectName', {
initialValue: '',
rules: [
required: true,
message: '用户名不能为空'
<Input placeholder="请输入项目名称" />
</FormItem>
<FormItem label="项目省份" {...formItemLayout}>
{getFieldDecorator('projectProvince', {
rules: [{ required: true, message: '项目省份为必选项' }],
<Select placeholder="请选择项目省份" onChange={this.proviceChange}>
{/* <Option value="xiao">租户</Option>
<Option value="mao">总包</Option> */}
this.state.provicelist.map((item, id) => (
<Option key={item.id} value= {item.id}>{item.Name}</Option>
</Select>,
</FormItem>
<FormItem label="项目城市" {...formItemLayout}>
{getFieldDecorator('projectCity', {
rules: [{ required: true, message: '项目城市为必选项' }],
<Select placeholder="请选择项目城市">
this.state.pjcitylist.map((item, id) => (
<Option key={item.id} value= {item.id}>{item.name}</Option>
</Select>,
</FormItem>
<FormItem label="项目地址" {...formItemLayout}>
getFieldDecorator('projectAdress', {
initialValue: '',
rules: [
required: true,
message: '项目地址不能为空'
<Input placeholder="请输入项目地址" />
</FormItem>
<FormItem label="项目阶段" {...formItemLayout}>
{getFieldDecorator('projectStage', {
rules: [{ required: true, message: '项目阶段为必填项' }],
<Input placeholder="请输入项目阶段" />
</FormItem>
<FormItem label="建筑面积" {...formItemLayout}>
getFieldDecorator('projectAra', {
initialValue: '',
rules: [
required: true,
message: '项目地址不能为空'
<Input placeholder="请输入建筑面积" />
</FormItem>
<FormItem label="项目投资金额" {...formItemLayout}>
getFieldDecorator('projectmoney', {
initialValue: '',
rules: [
required: true,
message: '项目投资不能为空'
<Input placeholder="请输入项目投资金额" />
</FormItem>
<FormItem label="是否大型项目" {...formItemLayout}>
{getFieldDecorator('isgreproject', {
rules: [{ required: true, message: '项目阶段为必选项' }],
<Select placeholder="请选择项目阶段">
<Option value="是">是</Option>
<Option value="否">否</Option>
</Select>,
</FormItem>
<FormItem label="项目公开日期" {...formItemLayout}>
getFieldDecorator('publiceDate', {
<DatePicker placeholder="请选择项目公开日期"/>
</FormItem>
<FormItem label="项目开工日期" {...formItemLayout}>
getFieldDecorator('startDate', {
<DatePicker placeholder="请选择项目开工日期" />
</FormItem>
<FormItem label="项目完工日期" {...formItemLayout}>
getFieldDecorator('endDate', {
<DatePicker placeholder="请选择项目完工日期" />
</FormItem>
<FormItem label="项目描述" {...formItemLayout}>
getFieldDecorator('projectDescribe', {
<Input.TextArea rows={3} placeholder="请输入项目描述" />
</FormItem>
<FormItem label="产品需求" {...formItemLayout}>
{getFieldDecorator('productxy', {
rules: [{ required: true, message: '项目阶段为必选项' }],
<Select placeholder="请选择产品需求">
{/* <Option value="private">平台</Option>
<Option value="public">滑升门</Option> */}
this.state.neddproductlist.map((item, id) => (
<Option key={item.id} value= {item.id}>{item.name}</Option>
</Select>,
</FormItem>
<FormItem label="预计购买日期" {...formItemLayout}>
getFieldDecorator('advanceDate', {
<DatePicker placeholder="请选择预计购买日期" format="YYYY-MM-DD" />
</FormItem>
<FormItem label="预计金额" {...formItemLayout}>
getFieldDecorator('advanceAmount', {
initialValue: '',
rules: [
required: true,
message: '预计金额不能为空'
<Input placeholder="请输入预计金额" />
</FormItem>
<FormItem label="电联信息" {...formItemLayout}>
getFieldDecorator('contactinfo', {
<Input.TextArea rows={3} placeholder="请输入电联信息" />
</FormItem>
{/* 联系人员信息 */}
{contactlist}
{/* <EditableTable gettablevalue = {this.props.gettabledata}></EditableTable> */}
<Form.Item label="联系人员信息" {...formItemLayout}>
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
<Icon type="plus" /> 添加联系人
</Button>
</Form.Item>
{/* 联系人员信息 */}
</Form>
点击添加联系人按钮的事件add事件
//点击添加联系人按钮
add =() =>{
const {contactpenlist} = this.state;
let da = { contactType: '', name: '',phone:'',duties:'', department:'',address:''}
//var obj = contactpenlist.push(da);
// this.setState({
// contactpenlist:obj
// })
this.state.contactpenlist.push(da);
//obj.push(da);
console.log('yyyy');
// console.log(obj);
// console.log(obj);
this.setState({
contactpenlist
//console.log(this.state.contactpenlist);
//点击添加联系人按钮
点击删除触发的事件
//点击删除按钮触发的事件
delcontact = (index)=>{
const {contactpenlist} = this.state;
contactpenlist.splice(index,1)
console.log(index);
console.log('ppppp');
this.setState({
contactpenlist
得到数据并进行数据拼接
let newprojectInfo = this.props.form.getFieldsValue();
//处理拿到的联系人列表的数据
const arrvalue = []; // 保存输入框内的值
const arrtitle = []; // 保存key值
const test = /^(contactType)|(name)|(duties)|(department)|(phone)|(address)\d$/;
//var objlist = []
for(const key in newprojectInfo){
if(test.test(key)){
//console.log(newprojectInfo[key]);
//console.log(newprojectInfo[key]);
arrvalue.push(newprojectInfo[key]);
arrtitle.push(key);
// this.cityForm.props.form.getFieldValue(key);
// console.log(arrvalue);
// console.log(arrtitle);
// console.log(arrvalue);
// console.log(arrtitle);
//进行数据的拼接
const arr1 = arrvalue.map((ele,i,a)=>{
const obj = {};
if (i % 6 === 0) {
obj.contactType = ele;
obj.name = a[i + 1];
obj.duties = a[i + 2];
obj.department = a[i + 3];
obj.phone = a[i + 4];
obj.address = a[i + 5];
return obj;
return null;
}).filter(ele => ele !== null);
console.log(arr1);
//进行数据的拼接
数据格式如图 所示
实现点击按钮添加联系人的表单，效果如图所示点击按钮，效果如图所示定义动态添加的表单 const {contactpenlist} = this.state //添加联系人列表 const contactlist = contactpenlist.map((elem,index)=>( <Card title ='联系人' k...
react-antd-动态form表单
1.以官网的form.List为基础进行改造：动态增加表单，默认且至少为一项，不上限
2.虚拟设置formList的初始值
render渲染部分
name="dynamic_form_item"
onFinish={this.onFinish}
ref={this.listForm}
initialValues= {{
sendTo:
表单是应用程序中最重要的部分之一.通过表单,我们可以从用户那里获得丰富的输入.我们从基础一开始做起,这里不使用任何UI框架,用react自身来实现对Form表单的控制.
1.基础按钮
import React from 'react';
const content = document.createElement('div');
document.body.appendChild(content);
module.exports = class extends React.Component {
对于 ToB 业务而言，随着业务的不断壮大，接入的客户逐渐增加，相同页面的差异化的需求越来越多，尤其是在表单层面，小到多一个字段少一个字段这种简单的需求，大到整个页面不变的只剩下一些基础字段。
一旦这种差异化需求随着业务量的增长而膨胀起来。代码中的 IF ELSE 越来越多，项目就越来越难以维护。基于这个问题，比较普遍的解决方案要么是项目拆分，要么相同项目的代码分割。
这两种方案都有维护成本比较大的弊端，那么有没有更好点的解决方案呢。本文就带你了解一下动态化表单搭建。
什么是动态表单
先下个定义，动态
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Form, InputNumber, Input, DatePicker, Button, Select } from 'antd';
import moment from 'moment';
// 推荐在入口文件全局设置 loca
* @Date: 2022-02-22 17:36:28
* @LastEditTime: 2022-02-22 21:24:53
* @FilePath: \testpull\githubreact\src\pages\AdvanceSearchForm\index.jsx
import React, { useState } from 'react'
import { Form, Row, Col, But
React动态表格
注意：v1.0增加了对React 16.x的支持，但是由于Mixins在React 15中的工作方式，这是相当可观的重写，以提供完全不使用Mixins的API。
该存储库包含一组基于React的表单组件，这些组件在ESnet中用于我们的网络数据库应用程序（ESDB），但可由需要构建复杂表单的任何基于React的项目使用。
我们的方法是将表单视为受控输入，本质上是具有很多输入的输入（可能有很多输入，依此类推...）。您可以根据需要保持表单的状态，然后将该状态向下传递给表单其valueStruts。 如果编辑了表单，则将调用回调，您可以更新表单状态。 当需要保存表单时，这取决于您，您始终拥有表单的状态。 在此之上，表单具有定义规则的架构。 因此，您还可以收听缺失值或错误计数的变化。 利用此信息，很容易控制用户是否也可以提交表单。
该库基于Immutable.js构建
开发过程中经常需要封装组件，如果多个功能需求都差不太多，一个组件可以复用的话，那简直太方便了。
举个例子，一个输入表单的组件，复用时每一个不同的功能里，输入标签数量是不一样的，比如登录有两个输入框，而修改用户名密码可能有4个输入框。指定几个输入框以及提示、内容什么的可以通过props传入。重点是如何获取这几个输入标签的值并传给父组件呢？当然，一种方式是使用受控组件，每一个输入框对应一个state或者他们的值都传入到一个存数组的state里。另一种方式通过非受控组件实现，也就是这里要说的。
App.js
handleChange = (event) => {
const { name, value } = event.target;
this.setState({ [name]: value });
// 处理表单提交
handleSubmit = (event) => {
event.preventDefault(); // 防止默认提交行为
console.log(this.state); // 打印表单输入的值
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
</label>
<label>
Email:
<input type="email" name="email" value={this.state.email} onChange={this.handleChange} />
</label>
<label>
Message:
<textarea name="message" value={this.state.message} onChange={this.handleChange} />
</label>
<button type="submit">Submit</button>
</form>
ReactDOM.render(<MyForm />, document.getElementById('root'));
在上面的例子中，我们创建了一个名为 `MyForm` 的 React 组件，并在状态中添加了三个输入值：`name`、`email` 和 `message`。我们还定义了两个方法来处理表单输入和提交，分别是 `handleChange` 和 `handleSubmit`。
在 `handleChange` 方法中，我们使用 `event.target` 来获取输入的值，并使用 `setState` 方法将其保存到组件的状态中。
在 `handleSubmit` 方法中，我们使用 `event.preventDefault()` 防止默认的表单提交行为。然后我们打印出组件的状态，以便查看表单输入的值。
最后，我们在表单元素上使用 `onSubmit` 属性来执行 `handleSubmit` 方法。这将会在用户点击提交按钮时触发。
希望这个例子能帮助你理解如何在 React 中提交表单。
