我正在将数据映射到 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 ******/}
您可以在设置项目时使用价格设置 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它将自动为您完成）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句