Я создаю форму заказа, используя сценарий реакции. Форма позволяет пользователю вводить quantity, unit price и выбирать, является ли элемент taxable.
Я урезал свой код для этого примера, чтобы показать только возможность добавления 1 или 2 элементов. Но для конечного продукта пользователь сможет добавить около 10-15 позиций. Таким образом, будет по 15 единиц каждого поля. Которые будут обозначены как quantity1, quantity2, quantity3 и и т. Д. c.
Итак, как только пользователь выберет количество, цену за единицу и, облагается ли товар налогом или нет. У меня есть поле, которое вычисляет total extended price, которое является просто quantity * unit price
. У меня также есть два поля. Тот, который добавляет все налоги для всех товаров (это только те, для которых пользователь выбирает «taxable» для «Да»). А другая - итоговая цена со всеми налогами.
Сейчас все работает. Но ниже приведены 3 проблемы, с которыми я столкнулся. Проблемы начинаются, когда пользователь вносит изменения.
, если пользователь выбирает от taxable до Yes, а затем обратно на No. Цена корректируется, однако Estimated Sales Tax по-прежнему не отражает изменения.
Если пользователь выбирает 5 в качестве количества, затем изменяется на 4, обратно на 5, налог добавляется дважды .
Если налог оказывается десятичным, при добавлении налога к общей сумме математика неверна.
Вот мой код:
import * as React from 'react';
export class Screen1 extends React.Component<{}, {
Quantity: number,
UnitPrice: number,
ExtendedPrice: number,
Taxable1: string,
TaxAmount1: number,
Quantity2: number,
UnitPrice2: number,
ExtendedPrice2: number,
Taxable2: string,
TaxAmount2: number,
EstimatedTotal: number;
EstimatedSalesTax: number;
}> {
constructor(props) {
super(props);
this.state = {
Quantity: null,
UnitPrice: null,
ExtendedPrice: null,
Taxable1: '',
TaxAmount1: null,
Quantity2: null,
UnitPrice2: null,
ExtendedPrice2: null,
Taxable2: '',
TaxAmount2: null,
EstimatedTotal: null,
EstimatedSalesTax: 0,
};
this.handleChangeQuantity = this.handleChangeQuantity.bind(this);
this.handleChangeUnitPrice = this.handleChangeUnitPrice.bind(this);
this.handleChangeExtendedPrice = this.handleChangeExtendedPrice.bind(this);
this.handleChangeTaxable1 = this.handleChangeTaxable1.bind(this);
this.handleChangeEstimatedTotal = this.handleChangeEstimatedTotal.bind(this);
this.handleChangeEstimatedSalesTax = this.handleChangeEstimatedSalesTax.bind(this);
}
handleChangeQuantity = async (event: any) => {
const value = parseInt(event.target.value)
await this.setState({ Quantity: value })
console.log(value);
this.handleChangeExtendedPrice()
}
handleChangeUnitPrice = async (event: any) => {
const value = parseInt(event.target.value)
await this.setState({ UnitPrice: value })
console.log(value);
this.handleChangeExtendedPrice()
}
handleChangeTaxable1 = async (event: any) => {
const value = event.target.value;
await this.setState({ Taxable1: value })
console.log(value);
this.handleChangeExtendedPrice()
}
handleChangeExtendedPrice() {
if (this.state.Taxable1 === "Yes") {
this.setState({
ExtendedPrice: (this.state.Quantity * this.state.UnitPrice) + ((this.state.Quantity * this.state.UnitPrice) * .08),
TaxAmount1: (this.state.Quantity * this.state.UnitPrice) * .08
});
} else {
this.setState({
ExtendedPrice: this.state.Quantity * this.state.UnitPrice,
});
}
console.log(this.state.ExtendedPrice);
this.handleChangeEstimatedTotal();
}
handleChangeEstimatedSalesTax = async () => {
await this.setState({
EstimatedSalesTax: this.state.TaxAmount1 + this.state.TaxAmount2,
});
console.log(this.state.EstimatedSalesTax);
}
handleChangeEstimatedTotal = async () => {
await this.setState({
EstimatedTotal: this.state.ExtendedPrice + this.state.ExtendedPrice2 + this.state.EstimatedSalesTax,
});
console.log(this.state.EstimatedTotal);
this.handleChangeEstimatedSalesTax();
}
public render(): React.ReactElement<{}> {
return (
<div>
<form onSubmit={this._onNewRequest}>
<div>
<div>
<label>
Quantity <br /> (Units)
</label>
<input
value={this.state.Quantity}
onChange={this.handleChangeQuantity}
type="number"
maxLength={9}
pattern='[0-9]{0,5}'
/>
</div>
<div>
<label>
Estimated<br /> Unit Price
</label>
<input
value={this.state.UnitPrice}
onChange={this.handleChangeUnitPrice}
type="number"
pattern='[0-9]{0,5}'
prefix={'$'}
/>
</div>
<div>
<label>
Estimated<br /> Extended Price
</label>
<input
value={this.state.ExtendedPrice}
//onChange={(e) => this.handleChangeUnitPrice(e)}
type="number"
disabled
/>
</div>
<div>
<label>
Taxable?
</label>
<select name="Taxable1" value={this.state.Taxable1} onChange={this.handleChangeTaxable1}>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
</div>
<div>
<div>
<label>
Estimated Sales Tax
</label>
<input
value={this.state.EstimatedSalesTax}
type="number"
disabled
/>
</div>
<div>
<label>
Estimated Total
</label>
<input
value={this.state.EstimatedTotal}
type="number"
disabled
/>
</div>
</div>
</form>
);
}
}