Javascript 在reactjs中单击事件时按顺序添加和更新输入值

我试图在reactjs中编写一个函数，其中输入值将在给定的数组onclick-specific-index-add按钮中按顺序更新。 这是我迄今为止所做工作的沙盒链接： 这是作为json的状态值：

this.state ={
    locationSiteList:[ {
        "sideName": 'Ceiling',
        "length": "",
    },
        {
            "sideName": 'Floor',
            "length": "",
        },
        {
            "sideName": 'East wall',
            "length": "",
        }

    ],

};

我想要的是，如果单击第一个索引上的“添加”按钮，则侧名将自动更改为Ceiling1，并将添加另一个名为“天花板2”的数组。对于楼层索引，如果单击“楼层添加”按钮，它将更改为floor1，floor2。预期结果如下所示：

locationSiteList:[ {
                "sideName": 'Ceiling1',
                "length": "",
            },
                {
                    "sideName": 'Ceiling2',
                    "length": "",
                },

                {
                    "sideName": 'Floor1',
                    "length": "",
                },
                {
                    "sideName": 'Floor2',
                    "length": "",
                },
                {
                    "sideName": 'East wall',
                    "length": "",
                }

            ],

这是我正在映射的渲染：

 <Grid item xs={12}>
                        {
                            this.state.locationSiteList.map((dev, key) =>
                                <Grid container style={{marginTop:'8px'}}>

                                    <Grid item xs={3}  style={{}}>
                                        <input disabled style={{width:'100%'}}
                                               type="text" value={dev.sideName}  />
                                    </Grid>


                                    <Grid item xs={1} style={{paddingLeft:'8px'}}>

                                            <input disabled style={{width:'100%'}}
                                                   type="text"  />
                                    </Grid>


                                    <button type="button" fullWidth="true" variant="contained"
                                            onClick={() => { this.insertSides()}}>
                                        Add
                                    </button>

                                </Grid>
                            )}

                    </Grid>

{
this.state.locationSiteList.map（（开发人员，密钥）=>
{this.insertSides（）}}>
添加
)}

这是我的附加功能：

   insertSides = () => {
        console.log('rawInsert....');
        const locationSiteList = [...this.state.locationSiteList];

        if (locationSiteList.length < 1) {
            var a = 1
        } else {
            var a = locationSiteList.length + 1
        }
        locationSiteList.push({
            'sideName': a,


        });

        this.setState({locationSiteList: locationSiteList});
    };

insertSides=（）=>{
console.log（'rawisert…'）；
const locationSiteList=[…this.state.locationSiteList]；
如果（locationSiteList.length<1）{
变量a=1
}否则{
变量a=locationSiteList.length+1
}
locationSiteList.push({
“sideName”：一个，
});
this.setState（{locationSiteList:locationSiteList}）；
};

---

如何使其工作？

我花了一些时间在链接的沙箱中调整您现有的代码 我不确定数组对象中“长度”的用途是什么，所以我用一个id来代替它，以便轻松跟踪

import React from "react";
import Grid from "@material-ui/core/Grid";
import "./App.css";

class ModalDemo extends React.Component {
  state = {
    showModal: false,
    caption: "",
    modalSrc: "",
    locationSiteList: [
      {
        sideName: "Ceiling",
        id: "C"
      },
      {
        sideName: "Floor",
        id: "F"
      },
      {
        sideName: "East wall",
        id: "EW"
      }
    ]

    // ...rest of the state
  };
  insertSides = (item) => {
    const locationSiteList = [...this.state.locationSiteList];
    var count = locationSiteList.filter((obj) => obj.id === item.id).length;

    var position = locationSiteList.indexOf(item);
    position = position + count;

    count = count + 1;

    locationSiteList.splice(position, 0, {
      sideName: item.sideName + count,
      id: item.id
    });

    this.setState({ locationSiteList: locationSiteList });
  };

  render() {
    return (
      <div>
        <Grid item xs={12}>
          {this.state.locationSiteList.map((dev, key) => (
            <Grid container style={{ marginTop: "8px" }}>
              <Grid item xs={3} style={{}}>
                <input
                  disabled
                  style={{ width: "100%" }}
                  type="text"
                  value={dev.sideName}
                />
              </Grid>

              <Grid item xs={1} style={{ paddingLeft: "20px" }}>
                <input style={{ width: "100%" }} type="text" />
              </Grid>

              <button
                style={{ marginLeft: "20px" }}
                type="button"
                fullWidth="true"
                variant="contained"
                onClick={() => {
                  this.insertSides(dev);
                }}
              >
                Add
              </button>
            </Grid>
          ))}
        </Grid>
      </div>
    );
  }
}

export default ModalDemo;

从“React”导入React；
从“@material ui/core/Grid”导入网格；
导入“/App.css”；
类ModalDemo扩展了React.Component{
状态={
showModal：错，
标题：“，
modalSrc:“，
位置站点列表：[
{
侧名：“天花板”，
id:“C”
},
{
侧名：“楼层”，
id:“F”
},
{
侧名：“东墙”，
id:“EW”
}
]
//…其他州
};
insertSides=（项目）=>{
const locationSiteList=[…this.state.locationSiteList]；
var count=locationSiteList.filter（（obj）=>obj.id==item.id）.length；
var position=locationSiteList.indexOf（项目）；
位置=位置+计数；
计数=计数+1；
位置SiteList.拼接（位置，0{
sideName:item.sideName+计数，
id:item.id
});
this.setState（{locationSiteList:locationSiteList}）；
};
render（）{
返回(
{this.state.locationSiteList.map（（dev，key）=>(
{
这是insertSides（dev）；
}}
>
添加
))}
);
}
}
导出默认ModalDemo；

这有一个限制，如果用户点击“天花板2”添加按钮，它将创建新项目“天花板23”。

---

为了避免这种情况，只允许使用3个初始按钮并隐藏其余按钮。

它工作得非常好。任何使其符合天花板2的顺序的方法都不会在最后一个按钮中显示，而是在天花板后显示1？更新了上述代码spinet以执行相同的操作。干杯