React实现添加多行输入框(点击一行增加一行)

有时候我们会碰到例如批量增加账号密码的需求，点击加一按钮，再出现一组账号密码的弹框。
如何实现呢？
首先，有多组，是个不确定向，可能只添加了一组，但是也有可能连续添加七八组。
所以肯定是一个变量在控制显示多少个，肯定是循环出来的，每点击一次，这个长度增加1，列表循环出来的页面输入框加1。
例如。我们在react项目中：
我们需要在state中定义状态，我们就拿一个账号和一个密码来说，默认我们出现一组账号密码，那我们循环的时候就是有个数组，数组里面嵌套对象，对象代表一个组即可，我们给那个组添加一个id代表是第几个。
默认只有一组:

//在state中。
     state={
	returnAddRowFunList: [
	            {
	                id: "0"
	            },
	        ],
	        userName0: "",
	        passWord0: ""
		}

规定好在render中要渲染的dom循环，我们封装在一个函数中：

    returnAddRowFun = () => {
        let { returnAddRowFunList, cacheTypeList } = this.state;
        return (
            returnAddRowFunList && returnAddRowFunList.length && returnAddRowFunList.map(item => {
                return (
                    <React.Fragment key={item.id}>
                        {
                            this.returnDomFun(
                                <Select
                                    allowClear
                                    title={`TYPE类别${item.id}：`}
                                    showArrow={true}
                                    value={this.state[`userName${item.id}`]}
                                    onChange={(e) => { this.inputName(`userName${item.id}`, e) }}
                                    placeholder="请选择"
                                    options={cacheTypeList}
                                    optionLabelProp="label"
                                    keyField="type"
                                    valueField="type"
                                    titleField="descName"
                                    dropdownMatchSelectWidth={true}
                                >
                                </Select>
                            )
                        }
                        {
                            this.returnDomFun(
                                <>
                                    <Input
                                        value={this.state[`passWord${item.id}`]}
                                        title={`文件名称${item.id}`}
                                        placeholder="请输入"
                                        onChange={(e) => this.inputName(`passWord${item.id}`, e.target.value)} />
                                    <a href="#!" style={{ color: '#ff7875', fontSize: '12px', marginTop: '8px', marginLeft: '8px' }}>*</a>
                                </>, { width: "350px" })
                        }
                        //只有最后一项才显示 增加下一行的按钮
                        {
                            Number(item.id) === returnAddRowFunList.length - 1 ?
                                <div style={{ paddingLeft: '150px' }}>
                                    <Button onClick={() => { this.addRowFun() }} title="添加行" Type="noIcon" />
                                </div> : null
                        }
                    </React.Fragment>
                )
            })
        )
    }

在上述的循环中，我们通过this.state[userName${item.id}]来获取state状态机中的数据的值。
addRowFun函数：

    addRowFun = () => {
        let { returnAddRowFunList } = this.state;
        let addId = returnAddRowFunList.length
        let obj = {}
        // obj[`userName${addId}`] = ""
        // obj[`passWord${addId}`] = ""
        obj[`id`] = `${addId}`

        let stateObj = {}
        stateObj[`userName${addId}`] = ""
        stateObj[`passWord${addId}`] = ""
        //会增加userName1，passWord1，....的state属性，用于提交的时候获取。
        this.setState(stateObj)
        this.setState({
            returnAddRowFunList: [...returnAddRowFunList, obj],
        })
    }

render函数：

	<div className="LongSelectWidthBox" >
         {this.returnAddRowFun()}
   </div>

当点击的时候执行addRowFun函数，这个函数会增加returnAddRowFunList 的length，长度是几，id就到几，页面就会渲染几组的账号和密码。

提交：
我们在提交的时候我们同样的循环returnAddRowFunList 即可，使用里面的id或者index+1，都可以得到state中的值 例如：

  let arrObj = []
        returnAddRowFunList.map(item => {
            let obj = {}
            obj[`userName${item.id}`] = this.state[`userName${item.id}`]
            obj[`passWord${item.id}`] = this.state[`passWord${item.id}`]
            arrObj = [...arrObj, obj]
        })
        // arrObj就是最后的数据 【{userName1:"aaa",passWord1:"***"}，{userName2:"bbb",passWord1:"***"}】

原始