从 React 中的选择选项下拉列表中填充字段 A 后，如何自动填充字段 B答案

【问题标题】：How do I auto-populate field B after field A is filled from a select options drop down in React从 React 中的选择选项下拉列表中填充字段 A 后，如何自动填充字段 B
【发布时间】：2021-10-04 22:57:33
【问题描述】：

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

下面是我的反应代码

   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

【问题讨论】：

将值传递给字段 2

标签： arrays reactjs forms field

【解决方案1】：

设置item时可以用价格设置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，这将自动为您完成）

【讨论】：

感谢您的回复。所以我使用了你的方式，但我得到了一个错误。 “未捕获的 ReferenceError：产品未定义”所以我在项目名称处理程序中使用了产品数组。 let products= this.state.products 我仍然收到此错误“未捕获的 ReferenceError: selectedProduct 未定义”和此错误“无法读取未定义的属性‘价格’”
handleItemNameChange(event) { let products= this.state.products let selectedProduct = products.find(product => product.id === event.target.value); this.setState({item_name: event.target.value, item_price: selectedProduct.price }); }
我已经更新了代码。你让它工作了吗？如果没有，您将显示更新后的代码和您面临的错误。
我已按照您的建议更新了代码。我现在收到此错误“app.js:35405 Uncaught TypeError: Cannot read property 'price' of undefined”
能不能把console.log(event.target.value);控制台.log(this.state.products);在 handleItemNameChange 函数的开头，并在浏览器控制台中分享日志。