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中调试了代码，我只是未定义 name 和 price 。

Answer 1

传递给handle函数的参数不正确。它们当前是指状态中的项数组，但它应该引用输入字段值。

创建this.state.input.name和this.state.input.price之类的内容。这些必须由文本字段onChange处理程序设置。

Answer 2

首先更改您的状态以包含onPost: function () { this.nonAjaxPosted = true; this.abortXHRs() },和name：

price

您想要添加一个新函数来处理输入字段中的更改。称之为this.state = { name: '', price: '', items: [...] }。它接受事件，获取输入的名称，并设置该键的适当状态值。

handleInput

这是相应的JSX：

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

here's a working demo 。查看控制台，了解<input type="text" name="name" onChange={this.handleInput} value={this.state.name} /> <input type="text" name="price" onChange={this.handleInput} value={this.state.price} />的更改。

Answer 3

正如@sketchedin指出的那样，传递的参数不是用户自己输入的值，而是绑定到状态对象。

为了传递参数，您必须调用onChange()函数，但是如果要从表单的句柄函数调用它，则应确保捕获当前输入值（即参数传递应该绑定到输入而不是状态对象。）

handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const data = new FormData(form);

  const name = form.elements[name];
  const price = form.elements[price];

  this.addProductToBasket(name, price);
}

我们在上面的行中做的是我们使用DOM api的表单元素并获取正确的输入值而不是使用REACT来操作表单。

React：通过输入字段将对象添加到状态数组中

3 个答案: