передача динамического события c onchange из массива в reactjs - PullRequest
Новая
       16

передача динамического события c onchange из массива в reactjs

1 голос
/ 31 марта 2020

Я пытаюсь обработать динамический ввод c 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, ни одно из полей ввода не будет размещено соответствующим образом. Первое поле ввода будет содержать значение идентификатора из базы данных. и во втором поле ввода будет событие onchange, значение которого будет установлено с первым идентификатором ввода. Я хочу сохранить это значение в событии onchange. Идея состоит в том, чтобы сохранить такой массив на основе события onchange поля ввода: 

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

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

    }
  ]
}

В настоящее время я не могу печатать что-либо в поле ввода, кроме последнего. Но я не могу управлять им динамически. Как я могу манипулировать этим? любая помощь, касающаяся манипулирования этим динамическим c входом в onchange, будет оценена.

1 Ответ

1 голос
/ 01 апреля 2020

Установить cogList для массива - levelNum: 

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