javascript - react : Adding an object to an array in state through input fields

Question

所以，我想读取两个文本字段值并使用按钮重置我的状态。这是我的代码:

this.state = {

  items: [{
    name: 'Cola',
    price: 1.20
  }, {
    name: 'Stuff',
    price: 0.50
  }, {
    name: 'Beer',
    price: 0
  }
]
};


handle = (name, price) => {
    this.addProductToBasket(name, price);
  }

addProductToBasket = (name, price) => {

    var newArray = this.state.items.slice();

    var itemToBeAdded = {
      name : name,
      price : price
    }; 

    newArray.push(itemToBeAdded);
    console.log(newArray)

    this.setState( {items:newArray} )

}


<form onSubmit={ () => this.handle(this.state.items.name, this.state.items.price)}>
  <input type="text" name='name' value={this.state.items.name}/>
  <input type="text" name='price' value={this.state.items.price}/>
  <button type="submit" value="Submit">BUTTON</button>
</form>

我测试过

addProductToBasket

并且它有效!我在 Chrome 中调试了代码，但名称和价格只是未定义。

Answer 1

首先更改您的状态以包含名称和价格:

this.state = {
  name: '',
  price: '',
  items: [...]
}

您想要添加一个新函数来处理输入字段中的更改。称之为handleInput。它接受事件，获取输入的名称，并设置该键的适当状态值。

handleInput(e) {
  let { name, value } = e.target;
  if (name === 'price') value = +value;
  this.setState({ [name]: value });
}

这是相应的 JSX:

 <input type="text" name="name" onChange={this.handleInput} value={this.state.name} />
 <input type="text" name="price" onChange={this.handleInput} value={this.state.price} />

和 here's a working demo 。查看控制台以了解 this.state 的更改。