使用表单名称响应表单状态更改

Question

在输入名称中使用数组时，使用react处理输入更改；

handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}

如果输入名称是例如user[email]，这是不起作用的，因为它周围有方括号。有人知道如何使它成为字符串或数组的通用名称吗？

我的状态低于；

this.state =
{
name: '',
type: '',
user: {
email: '',
}
};

Answer 1

当您有嵌套状态时，漂亮的this.setState({ [name]: value });实际上是不可行的，因为很难将名称映射到实际值。

您可以创建一个额外的函数，例如handleUserInputChange，它在user状态对象中设置值：

handleUserInputChange(event) {
const { target } = event;
const value = target.type === 'checkbox' ? target.checked : target.value;
const { name } = target;
this.setState(previousState => {
return { user: { ...previousState.user, [name]: value } };
});
}