Блог

Я сопоставляю данные с полем A (Поле продуктов) в раскрывающемся списке выберите параметры в форме реакции. Я хочу автоматически заполнить поле B (поле цены) количеством товара, выбранного в поле A. Я могу указать вариант продукта для поля A. Как заполнить поле B после выбора одного параметра в поле A

Ниже приведен мой код реакции

    constructor(props) {
    super(props)
    this.state = {
       
              products: [],

     }
    }

 handleItemNameChange(event) {
  console.log(event.target.value); 
   console.log(this.state.products); 

    const selectedProduct = this.state.products.find(product => 
                             product.id === event.target.value);
    this.setState({item_name: event.target.value, item_price: 
                    selectedProduct.price });
  }

  handleItemPriceChange(event) {
    this.setState( { ...this.state, item_price: event.target.value });
  }


{/**** Field 1     ******/}
   <Field  className="form-control form-control-sm" name="item_name"  component="select"  type="select" 
                                               onChange={this.handleItemNameChange}>
           
                 {products.map((product) => 
                                               <option key={product.id} value={product.id}>   
                                                      {  product.name}
                                               </option>
                                              )}
   </Field>


{/**** Field 2    ******/}

<Field className="form-control form-control-sm" name="item_price" type="text" onChange={this.handleItemPriceChange} />


{/**** end    ******/}
 

Найдите изображения результатов журнала консоли здесь. «16» — это выбранный продукт, а остальные-все перечисленные продукты
изображение 2

Вы можете установить состояние item_price с ценой при настройке товара:

 handleItemNameChange(event) {
  const selectedProduct = this.state.products.find(product => product.id == event.target.value);
  this.setState({item_name: event.target.value, item_price: selectedProduct.price });
}
 

И передайте состояние item_price в качестве значения в поле 2

 <Field 
    className="form-control form-control-sm" 
    value={this.state.item_price} 
    name="item_price" type="text" 
    onChange={this.handleItemPriceChange} 
 />
 

(И в качестве примечания, вам не нужно уничтожать и переходить this.state к setState тому, что будет сделано автоматически для вас)