Question

我实现了每当您单击添加产品按钮时都会创建的动态输入字段，但是我不为什么我只能选择itemAmount值，而不能选择productId和itemQuantity的输入值。 IAM使用React v16.0.2

productItems: Array(2)

 0: {"": "450000"} //productId is empty
1: {"": "670000"} //why does it only pick itemAmount but not the quantity and productId

我碰巧使用react-bootstarp进行样式设计。

constructor(){
this.state = {
  invoice_notes: '',
    itemValues: [] //suppose to handle the productItems that are being added.
}
//for the product items
handleItemChange(i,evt){
 const {name,value} = evt.target;
 const items = [...this.state.itemValues]
 items[i] = {[name]: value}
 //this.setState({items}) //it just has empty values
 this.setState({itemValues: items}) //works but empty for productId n amount

}

addProductItem(){
  const item = {
    productId: '',
    itemQty:'',
    itemAmount: ''
  }
  this.setState({itemValues: [...this.state.itemValues, item]})

}

createItemsUI(){
 //Use #array.map to create ui (input element) for each array values. 
 //while creating the fields, use a remove button with each field,
  return this.state.itemValues.map((elem,i)=> //recall arrow functions do not need return statements like {}
           <div key = {i}>
               <FormGroup controlId="formControlsSelect">
                  <ControlLabel>Product</ControlLabel>
                  <FormControl
                     componentClass="select"
                     name = "productId"
                     bsClass="form-control"
                     value = {this.state.itemValues[i].productId}
                     onChange =  {this.handleItemChange.bind(this,i)}>
                      <option value = "" disabled>{'select the product'}</option>
                        {productOptions.map((item,i)=>{
                           return(
                              <option 
                                   key = {i} label= {item}  value = {item}
                               >
                               {item}
                              </option>
                           )
                       })}
                  </FormControl>
                </FormGroup>
                 <FormInputs
                     ncols={["col-md-4","col-md-4"]}
                     proprieties={[
                       {
                         label: "Quantity",
                         type: "number",
                         bsClass: "form-control",
                         defaultValue:this.state.itemValues[i].itemQty,
                         onChange: this.handleItemChange.bind(this,i)
                      },
                      {
                        label: "Amount",
                        type: "number",
                        bsClass: "form-control",
                        defaultValue: this.state.itemValues[i].itemAmount,
                        onChange: this.handleItemChange.bind(this,i)
                     }
                   ]}
                />
              <Button onClick = {this.removeProductItem.bind(this,i)}>Remove</Button>
           </div>  
        )
  }

} 请我已经读过很多类似的问题，所以我认为我是在正确的轨道上。因此，在@steve布鲁斯评论之后，我对handleItemChange函数进行了一些更改，但碰巧得到了与选择pickleId和itemQty输入值几乎相同的行为。

handleItemChange(i,evt){
 const name = evt.target.getAttribute('name');
 console.log('let see name', name) //i getting the name of the atrribute --> productId, itemQty, ItemAmount
 const items = [...this.state.itemValues]
 items[i] = {[name]: value}
 this.setState({itemValues: items})

} 如果我按照类似问题的建议尝试使用setState（{items}），就会发生这种情况

items[i] = {[name]: value}
 this.setState({items})
RESULT of the productItems when u  click the submit button
productItems: Array(2)
0: {productId: "", itemQty: "", itemAmount: ""}
1: {productId: "", itemQty: "", itemAmount: ""}

但是当我至少使用this.setState（{itemValues：items}）时，我可以获得itemAmount的最后一个值

productItems: Array(2)
0: {itemAmount: "25000"}
1: {itemAmount: "45000"}
length: 2
Any help is highly appreciated

Answer 1

我相信您的错误会在您的handleItemChange(evt,i)函数中出现。

您似乎想通过销毁evt.target来返回“占位符”。这不起作用，因为evt.target无法理解“名称”。我认为您想尝试evt.target.attribute('name')返回名称。 evt.target.value将返回该输入的值，而evt.target.name不存在，因此返回未定义。

一个小技巧。您不再需要在构造函数中绑定函数。您可以摆脱构造函数并将其更新为箭头函数。

例如：

handleItemChange(i,evt){
 const {name,value} = evt.target;
 const items = [...this.state.itemValues]
 items[i] = {[name]: value}
 //this.setState({items}) //it just has empty values
 this.setState({itemValues: items}) //works but empty for productId n amount

成为这个：

handleItemChange = (i,evt) => {
 // const {name,value} = evt.target;
 //updated that to this here
 const { value } = evt.target; 
 const name = evt.target.attribute("name"); 
 ...

您的onChange中的呼叫如下所示：

onChange = {() => { this.handleItemChange(evt,i)}

您必须在onChange中添加() =>，以使handleItemChange不会在实际更改之前的每个渲染上被调用。当您通过参数evt和i时调用它。因此，() =>函数在onChange上被调用，然后handleItemChange（evt，i）被调用。

希望这会有所帮助。

无法使用reactjs从动态多个输入字段中获取一些值

1 个答案: