reactantd动态增减表单项组件，直接使⽤，可选初始值，⽀持多个表单项，附
源码。
antd 动态增减多个表单项组件，附源码
⼀些废话
之前有个需求是要两个动态增加的表单项，且每个表单项由3个组件构成。当时考虑抽出单独的组件实现，但因为上线时间关系，上线之后才完整的抽成组件。本组件⽤于复杂的动态增减表单项的⾃动取值，⽀持初始值的设置。成果在这⾥分享下。
form取到的值⽰例：
keyname:[
{“sex”: “option1”, “name”: “name”, “age”: “age”, “phone”: “123456”},
{“sex”: “option1”, “name”: “name”, “age”: “age”, “phone”: “123456”},
{“sex”: “option1”, “name”: “name”, “age”: “age”, “phone”: “123456”}
]
获取地址（成品+源码）
npm 获取⽅式（⾮源码）：
//想直接使⽤或者看效果的，可以先导⼊项⽬看看
npm install react-antd-dynamicformitem
项⽬仓库(源码与demo)：.
可以直接复制src ⽂件夹下⽂件放⼊项⽬，进⾏优化修改。
使⽤⽅法(组件可以直接放在项⽬⾥直接使⽤，不⼀定要引依赖)
v 1.1.1版本
//⽰例
import React,{PureComponent}from'react';
import{Form, Input, Select}from'antd';
import{DynamicFormItem, MyInput}from"react-antd-dynamicformitem"
const Option = Select.Option;
@ate({})
class FormTest extends PureComponent {
renderView=(params)=>{//表单项
return<MyInput
initialValue={params.key}
actions={[<Select onChange={(value)=>{//返回需要渲染的每个标签
}} value={params.key.item1}>
<Option value={"option1"}>选项1</Option>
<Option value={"option2"}>选项2</Option>
<Option value={"option3"}>选项3</Option>
<Option value={"option4"}>选项4</Option>
</Select>,<Input value={params.key.item2} onChange={(value)=>{
}}/>,<Input value={params.key.item3} onChange={(value)=>{
}}/>,<Input value={params.key.item4} onChange={(value)=>{
}}/>]}
/>
};
render(){
let{form}=this.props;
const okHandle=()=>{
form.validateFields((err, fieldsValue)=>{
if(err)return;
console.log("fieldsValue",fieldsValue);//
});
};
const matchesKey ={"sex":"","name":"","age":"","phone":""};
const matchesRules =[];
return(<DynamicFormItem {...this.props.form}//传⼊form内容
lable={"lable"}//表单项的lable，只在第⼀⾏出现
newKey={matchesKey}//newKey为每⼀个表单项的初始值
keysName={"keyname"}//表单中值的名称（key），同getFieldDecorator中内容
extra={"同表单项的extra"}//同表单项的extra
renderViewData={matchesRules}//内容回填的内容（⽐如说更新数据时的初始值）
renderView={derView}
/>);
}
}
export default FormTest;
v1.2.x版本（兼容之前版本，主要优化了renderView写法，⽀持替换增加表单项按钮样式与内容）
import React,{PureComponent}from'react';
import{Form, Input, Select,Button}from'antd';
import{MyInput,DynamicFormItem}from"react-antd-dynamicformitem"
/
/ import MyInput from "../components/MyInput"
// import DynamicFormItem from "../components/DynamicFormItem"
input标签placeholder属性const Option = Select.Option;
@ate({})
class FormTest extends PureComponent {
renderView=(params)=>
<MyInput>
<Select onChange={(value)=>{
}} value={params.key.item1}>
<Option value={"option1"}>选项1</Option>
<Option value={"option2"}>选项2</Option>
<Option value={"option3"}>选项3</Option>
<Option value={"option4"}>选项4</Option>
</Select>
<Input value={params.key.item2} placeholder="姓名" onChange={(value)=>{
}}/>
<Input placeholder="性别" value={params.key.item3} onChange={(value)=>{
}}/>
<Input placeholder="年龄" value={params.key.item4} onChange={(value)=>{
}}/>
</MyInput>
render(){
let{form}=this.props;
const matchesKey ={"item1":"option1","item2":"","item3":"","item4":""};
const matchesRules =[];
return(
<DynamicFormItem {...form}
lable={"这⾥是lable"}
newKey={matchesKey}
keysName={"matches"}
extra={"这⾥是提⽰信息"}
renderViewData={matchesRules}
addViewStyle={{color:"blue"}}
addView={<view><Icon type="plus"/>Add field</view>}
renderView={derView}
/>
);
}
}
export default FormTest;
具体的值会⾃动填⼊form内容。
api 与变量名解释
DynamicFormItem：
变量描述
{…form}传⼊所有form内容，⽅便组件包装值。
lable同Form.Item 的lable，只在第⼀⾏显⽰，⼀般都是需要的。
newKey新增的表单项的初始值，json对象，value可以没有，要有key。
keysName表单取值的名称。
extra同Form.Item 的extra，只在第⼀⾏显⽰，可选。renderViewData需要信息回填的值，可选。
renderView function 参数包含标签onChang事件renderViewOnchange 和当前表单项值。 具体的表单项内容，可以直接使⽤MyInput。
也可以⾃⼰实现。
addViewStyle
（v1.2.x）
新增按钮css样式addView （v1.2.x）新增按钮内容变量描述MyInput：
变量描述
actions 表单项的所有标签，暂时最多⽀持4个。标签要求：1.要有value属性，值为renderView⽅法参数 params.key[“你当前的标签取值的key”]。
v1.2.x说明：具体标签可以直接写在内部，标签要求不变。
最后
如果有什么问题，欢迎评论，或者提.⼀起学习，共同进步。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论