从 React 中的 select 选项下拉填充字段 A 后，如何自动填充字段 B

Question

我正在将数据映射到 React 表单中的字段 A（产品字段）下拉列表 select 选项。我想用字段 A 中的产品数量 select 自动填充字段 B（价格字段）。我能够列出字段 A 的产品选项。如何在字段 A

中 selected 一个选项后填充字段 B

下面是我的 React 代码

   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    ******/}

Find Console log results images here. "16" is the Selected Product and the rest are all the listed products image 2

Answer 1

设置商品时可以设置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，这将自动为您完成）

从 React 中的 select 选项下拉填充字段 A 后，如何自动填充字段 B

How do I auto-populate field B after field A is filled from a select options drop down in React

forms

arrays

field

reactjs