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

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

Answer 2

您正在直接调用函数handleChange()，它将返回undefined。因此，您要将onChange事件设置为undefined。可以使用包装函数

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