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

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 />

////// Category Value 可以更新，但是 Items 值没有更新

          <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 }
});
}

希望这能解决您的问题。如果您需要与您提到的相同的状态，请告诉我。