在 reactjs 中处理来自数组的动态 onchange 事件

Question

我正在尝试处理数组中的动态 onchange 名称输入。我正在调用一个函数来设置输入的总数。根据列表大小，不会放置输入框。

    componentDidMount() {

        this.handleLevelNum();
}
    handleLevelNum() {
        const levelNum = [];
        var getValue = 2;
        if(getValue > 0) {
            var i;
            for (i = 1; i <= getValue; i++) {
                console.log(getValue)
                levelNum.push({
                    'cogsId': i,
                    'riskFactor': ''
                });
                this.setState({
                    levelNum: levelNum,
                });
            }

            console.log("print level number",levelNum)
        }

        else{
            this.setState({
                levelNum: [],
            });
        }
    }



             <Grid container spacing={24}>
                                  {
                                    this.state.levelNum.map((design, key) =>
                                        <Grid item xs={12} >
                                    <input style={{width:'100px'}}
                                           type="text" onChange={this.handleCogsId(design.cogsId}  placeholder=""/>
                                           <input name="col2"
                                           onChange={this.handleRiskFactor(design.cogsId)} value={this.state.riskFactor}
                                           type="text" placeholder=""/>
                                    <input name="col2"
                                             onChange={this.handlePrice(key)} value={this.state.price}
                                                   type="text" placeholder=""/>

                                </Grid>

                            )}
         <button   type="button" onClick={this.saveProjectFileItem} >Submit</button>

这些是我写的 onchange 函数：

handleRiskFactor = key => evt => {
        const newlevelNum = this.state.levelNum.map((design, sidx) => {
            if (key !== sidx) return design;
            return { ...design,cogsId:'', riskFactor: evt.target.value };
        });

        this.setState({ levelNum: newlevelNum });
    };

    handleCogsId = key => evt => {
        const newlevelNum = this.state.levelNum.map((design, sidx) => {
            if (key !== sidx) return design;
            return { ...design,cogsId:key, riskFactor: ''};
        });

        this.setState({ levelNum: newlevelNum });
    };

现在，如果索引大小为 2，则不会相应放置任何输入框。第一个输入框将包含数据库中 id 的值，第二个输入框将有一个 onchange 事件，该值将与第一个输入一起设置id.我想在onc​​hange事件中保存这样的值。想法是根据输入框的onchange事件保存这样的数组：

{
  "levelNum": [
    {
      "cogsId": "1",
      "riskFactor": "critical"

    },
    {
      "cogId": "2",
      "riskFactor": "None"

    }
  ]
}

现在我无法在输入框中输入任何内容，除了最后一个。但我无法动态操作它。我该如何操作它？ 任何有关在 onchange 中操作此动态输入的帮助将不胜感激。

Answer 1

将 cogList 设置为数组 - levelNum:

this.setState({cogsList:response.data.data.levelNum });