我正在嘗試做折扣價邏輯
折扣價格應該有實際價格的默認值，因為 0% 折扣意味著折扣價格與實際價格相同。
當我這樣做時，我得到了這個錯誤，它有時會隨機變化，而且大部分時間它作業正常。
import React, { Fragment, useState } from "react";
const App = () => {
const [price, setPrice] = useState();
const [discountPrice, setDiscountPrice] = useState();
const [discountRate, setDiscountRate] = useState(0);
const submitHandler = async () => {
console.log("hello");
};
return (
<>
<Fragment>
<div className="row">
<div className="col-12 col-md-10">
<Fragment>
<div className="wrapper my-5">
<form
onSubmit={submitHandler}
>
<div className="form-group">
<label htmlFor="price_field">Price</label>
<input
value={price}
onChange={(e) => {
setPrice(e.target.value);
setDiscountPrice(e.target.value);
}}
/>
</div>
<div className="form-group">
<label htmlFor="discounted_price">Discounted Price</label>
<input
value={discountPrice}
onChange={(e) => {
setDiscountPrice(e.target.value);
setDiscountRate(
((price - e.target.value) / price) * 100
);
}}
/>
</div>
<div className="form-group">
<label htmlFor="discounted_rate">Discount Rate</label>
<div className="input-group mb-3">
<input
value={discountRate}
onChange={(e) => {
setDiscountRate(e.target.value);
setDiscountPrice(
price - (e.target.value / 100) * price
);
}}
/>
</div>
</div>
</form>
</div>
<></>
</Fragment>
</div>
</div>
</Fragment>
</>
);
};
export default App;
以及如何實際查看折扣價格值是否為空？
我試過
discountPrice == "" || discountPrice.trim() = "" || discountPrice== null
discountPrice.trim()===""
不作業，說修剪不是一個功能
uj5u.com熱心網友回復：
添加初始值，如
const [price, setPrice] = useState(0);
const [discountPrice, setDiscountPrice] = useState(0);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/465237.html
標籤：javascript 反应 形式 验证 修剪