javascript - 从子组件更新数组内的状态对象

Question

首先我想道歉，因为我是 React 新手，所以我肯定做了一些非常糟糕的事情。

也就是说，我需要从子组件更新父组件的特定状态，我在父组件内使用处理程序来处理所有状态更改，但当我有数组和对象，我也可以将对象添加到“inpHotel”状态，到目前为止我得到的是:

父级

state = {
    activeStep: 0,
    fade: false,
    inpDestino: null,
    inpPeriodo: null,
    inpHotel: [{
        "nomeHotel": null,
        "urlMenorPreco": null,
        "quartos":[]
    }],
    inpNome: null,
    inpEmail: null,
    inpCelular: null,
};

//Handle function
handleChange = input => e => {
    this.setState({ [input]: e.target.value });
};

子项

<Grid item xs={12}>
    <TextField
        defaultValue={values.inpHotel[length].quartos[i].categoriaQuarto}
        onChange={     
            handleChange(`inpHotel[${length}].quartos[${i}].categoriaQuarto`)
        }
    />
</Grid>

编辑1

我的状态需要看起来像这样的 JSON

{
    "chCidade": 0,
    "dataCheckIn": "",  
    "dataCheckOut": "",  
    "nome": "",
    "sobrenome": "",
    "celular": "",
    "email": "",
    "hoteis":
    [
        {   
            "nomeHotel": "",
            "urlMenorPreco": "",
            "quartos":[{
                "categoriaQuarto": "",
                "menorPrecoDiaria": 0,
                "quantidadeAdulto": "",
                "criancas":[{"idade":0},{"idade":0}]
            },{
                "categoriaQuarto": "",
                "menorPrecoDiaria": 0,
                "quantidadeAdulto": 0,
                "criancas":[]
            }]
        },
        {
            "nomeHotel": "",
            "urlMenorPreco": "",
            "quartos":[{
                "categoriaQuarto": "",
                "menorPrecoDiaria": 0,
                "quantidadeAdulto": 0,
                "criancas":[{"idade":0},{"idade":0}]
            }]
        }
    ]
}

Answer 1

我发现您正在使用 e.target.value 这是事件，但您没有在 onChange 上传递事件对象。

试试这个

onChange={(e) => handleChange(inpHotel[${length}].quartos[${i}].categoriaQuarto, e)}

以下是示例代码:https://codepen.io/gadawag/pen/vPoavP?editors=1010