React中处理CFormSelect元素的onChange事件：选中选项后填充产品数据至输入框

首先先纠正一个小拼写错误：你的函数名写的是handleChangle，得改成handleChange，不然事件触发时会找不到这个函数哦。

接下来我们来编写handleChange的逻辑，核心思路是通过选中的产品ID匹配对应的产品数据，再更新状态来自动填充输入框：

const handleChange = (e) => {
  // 获取选中的产品ID
  const selectedProductId = e.target.value;
  // 更新选中产品的状态
  setSelectProduct(selectedProductId);

  // 如果选中的是默认选项（未选择具体产品），清空库存输入框
  if (!selectedProductId) {
    setQteInStock('');
    // 如果有价格输入框的状态，这里也可以同步清空：setProductPrice('');
    return;
  }

  // 在products数组中匹配对应的产品对象
  const matchedProduct = products.find(product => product._id === selectedProductId);
  
  // 找到产品后，更新库存（及价格）的状态
  if (matchedProduct) {
    // 转成字符串适配input的value类型
    setQteInStock(matchedProduct.qteInStock.toString());
    // 如果你的产品有price字段，且有对应输入框状态，添加这一行：
    // setProductPrice(matchedProduct.price.toString());
  }
};

关键步骤说明： #

• 获取选中ID：通过e.target.value拿到选中选项的value值（也就是产品的_id）
• 匹配产品数据：用数组的find方法，根据ID从products数组中筛选出对应的产品对象
• 更新状态：把找到的产品库存（和价格）赋值给对应的状态变量，绑定了value的输入框就会自动更新内容
• 处理默认选项：当用户选择-- Choose Product --时（此时selectedProductId为空），清空输入框内容，避免残留旧数据

如果你需要添加价格输入框，可以参考库存输入框的写法，比如：

<CCol className='col-sm-3'>
  <CFormLabel htmlFor="productPrice">Price </CFormLabel>
  <CFormInput type="text" size="lg" name='productPrice' id='productPrice' value={productPrice} placeholder="Price" aria-label="lg" disabled />
</CCol>

记得提前用useState定义对应的状态：const [productPrice, setProductPrice] = useState('');

这样就能实现选中产品后自动填充库存和价格的需求啦！

内容的提问来源于stack exchange，提问作者Kylian22