有时候我们会碰到例如批量增加账号密码的需求，点击加一按钮，再出现一组账号密码的弹框。
如何实现呢？
首先，有多组，是个不确定向，可能只添加了一组，但是也有可能连续添加七八组。
所以肯定是一个变量在控制显示多少个，肯定是循环出来的，每点击一次，这个长度增加1，列表循环出来的页面输入框加1。
例如。我们在react项目中：
我们需要在state中定义状态，我们就拿一个账号和一个密码来说，默认我们出现一组账号密码，那我们循环的时候就是有个数组，数组里面嵌套对象，对象代表一个组即可，我们给那个组添加一个id代表是第几个。
默认只有一组:
//在state中。
state={
returnAddRowFunList: [
{
id: "0"
},
],
userName0: "",
passWord0: ""
}
AI 代码解读
规定好在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>
)
})
)
}
AI 代码解读
在上述的循环中，我们通过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],
})
}
AI 代码解读
render函数：
<div className="LongSelectWidthBox" >
{
this.returnAddRowFun()}
</div>
AI 代码解读
当点击的时候执行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:"***"}】
AI 代码解读
原始
