如何在表单提交中添加嵌套对象

Question

https://codesandbox.io/s/reverent-engelbart-1zg2p

//////这是我的form.js文件

this.initialState = {id: "", title: "",items: [{id: "",name: "",price: ""}]};
this.state = this.initialState;}
handleChange = event => {const { name, value } = event.target;
this.setState({[name]: value});
};
submitForm = () => {this.props.handleSubmit(this.state);};
render() {
const { id, title, items } = this.state;
return (
<form>
<input
type="number"
name="id"
placeholder="Category Id"
value={id}
onChange={this.handleChange}/> <br />
<label>Category title</label>
<br />
<input
type="text"
name="title"
placeholder="Category title"
value={title}
onChange={this.handleChange}/><br />

//////类别值是精细更新，但项目值没有更新

<input
type="number"
name={items.id}
placeholder="itemId"
value={items.id}
onChange={this.handleChange}/><br />
<label>Item Name</label><br />
<input
type="text"
name={items.name}
placeholder="itemName"
value={items.name}
onChange={this.handleChange}/><br />
<label>Item Price</label><br />
<input
type="number"
name={items.price}
placeholder="itemPrice"
value={items.price}
onChange={this.handleChange}/><br />
<input type="button" value="submit" onClick={this.submitForm} />
</form>
); } }

我在代码中遗漏了一些内容，但不知道哪里出了问题。有人请帮帮我。。！！！

Answer 1

为此，您应该有类似这样的handleChange函数。

async onChange(e, index) {
if (
["id", "name", "price"].includes(
e.target.name
)
) {
let cats = [...this.state.items];
cats[index][e.target.name] = e.target.value;
await this.setState({
cats
});
} else {
await this.setState({ [e.target.name]: e.target.value });
}
console.log(this.props.vall);
}

你可以映射你的表单输入值，然后你可以声明你的值。我希望这会对你有所帮助。

{this.state.items.map((inputField, index) => (
<form key={`${inputField}~${index}`}>
<input
type="number"
name={inputField.id}
placeholder="itemId"
value={items.id}
onChange={e => {
this.onChange(e, index);
}}/><br />
<label>Item Name</label><br />
<input
type="text"
name={inputField.name}
placeholder="itemName"
value={items.name}
onChange={e => {
this.onChange(e, index);
}}<br />
<label>Item Price</label><br /> 
and so on ......
</form>
))}

Answer 2

对于单个表单呈现，您不需要将项初始化为状态中的数组，最好声明为对象，如下所示：

this.state = {
id: "",
title: "",
items: { id: "", name: "", price: "" }
};

现在，如果您想更新嵌套对象，那么创建一个单独的处理程序来执行

handleChangeItems = (event) => {
const { name, value } = event.target;
this.setState({
items: { ...this.state.items, [name]: value }
});
}

希望这能解决你的问题。如果你需要和你提到的一样的状态，请告诉我。