не удалось получить некоторые значения из нескольких динамических полей ввода с помощьюactj - PullRequest
Новая
       5

не удалось получить некоторые значения из нескольких динамических полей ввода с помощьюactj

0 голосов
/ 06 декабря 2018

Я реализовал динамические поля ввода, которые создаются всякий раз, когда вы нажимаете кнопку добавления продукта, но я не могу выбрать только значения itemAmount, но не значения ввода для productId и itemQuantity.Я использую 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

Я использую для стирки реактив-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, но я получаю почти то же самоеповедение, при котором не выбираются входные значения productId и 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

1 Ответ

0 голосов
/ 08 декабря 2018

Я полагаю, что ваша ошибка появляется в вашей функции 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, и я.Таким образом, функция () => вызывается onChange, а затем вызывается handleItemChange (evt, i).

Надеюсь, это поможет.

...