reactjs - 根据选择 ReactJS 显示价格

Question

我想根据用户从下拉框中的选择来显示价格，但我不知道该怎么做。这是我到目前为止所做的事情。

MongoDB数据：

_id:60c6148569e14f0abcf1dfa3
productname:"Product A"
productamount:100
_id:60c6148569e14f0abcf1dfa4
productname:"Product B"
productamount:200
_id:60c6148569e14f0abcf1dfa5
productname:"Product C"
productamount:300

反应JS

 useEffect(async () => {
        const productResponse = await Axios.get(process.env.REACT_APP_FETCH_URL + '/api/product/allproduct', { withCredentials: true })
        setProductData(productResponse.data)
    }, [])


const handleChange = (e) => {
        setProductData({ ...productData, [e.target.name]: e.target.value })
    }


 <div className="form-group row">
      <label className="col-sm-2 col-form-label">Product</label>
       <div className="col-sm-10">
          <select id="products" className="form-control" name="products" onChange={handleChange}>
             <option value={0}>Please Select One</option>
                {productData.map(option => (
                  <option value={option._id}>{option.productname}</option>
                     ))}
           </select>
        </div>
   </div>
   <div className="form-group row">
      <label className="col-sm-2 col-form-label">Product Amount</label>
      <div className="col-sm-10">
      <input type="number" name="productamount" onChange={handleChange} value={productData.productmount} className="form-control" maxLength="100" />
    </div>
  </div>

在这里，我有一个显示产品名称的下拉列表，并且工作正常。接下来，我有一个输入字段，我想根据选择显示产品数量。

我应该如何根据选择显示产品数量？非常感谢，非常感谢任何帮助。再次感谢。

标签： reactjs