react 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)：github.
可以直接複製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;

@Form.create({})
class FormTest extends PureComponent {
renderView= (params)=>{//表單項
    return <MyInput
      initialValue={params.key}
      actions={[<Select onChange={(value) => { //返回需要渲染的每個標籤
        params.renderViewOnchange({"sex": value}, params.key)
      }} 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) => {
        params.renderViewOnchange({"name": value.target.value}, params.key)
      }}/>, <Input value={params.key.item3} onChange={(value) => {
        params.renderViewOnchange({"age": value.target.value}, params.key)
      }}/>, <Input value={params.key.item4} onChange={(value) => {
        params.renderViewOnchange({"phone": value.target.value}, params.key)
      }}/>]}
    />
  };
  render() {
    let {form} = this.props;
    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        form.resetFields();
        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={this.renderView}
        />);
  }
}

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"

const Option = Select.Option;

@Form.create({})
class FormTest extends PureComponent {
  renderView = (params) =>
    <MyInput>
      <Select onChange={(value) => {
        params.renderViewOnchange({"item1": value}, params.key)
      }} 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) => {
        params.renderViewOnchange({"item2": value.target.value}, params.key)
      }}/>
      <Input placeholder="性別" value={params.key.item3} onChange={(value) => {
        params.renderViewOnchange({"item3": value.target.value}, params.key)
      }}/>
      <Input placeholder="年齡" value={params.key.item4} onChange={(value) => {
        params.renderViewOnchange({"item4": value.target.value}, params.key)
      }}/>
    </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={this.renderView}
      />
    );
  }
}

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”]。2.onChange/onBlur事件：調用renderViewOnchange方法。具體用法參考示例

v1.2.x說明：具體標籤可以直接寫在內部，標籤要求不變。

最後

如果有什麼問題，歡迎評論，或者提issues.一起學習，共同進步。