I want to display (salePrice + manualSettlementAmount), (salePrice -manualSettlementAmount), values according to the operation of sale state '+', '-'. And these result values are put in settlementAmount.
And the arithmetic operation values are calculated in onBlurSettlementAmount.
const [form, setForm] = useState({
sign: "+",
salePrice: "",
manualSettlementAmount: "",
settlementAmount: 0,
})
const onChangeSign = (event: React.ChangeEvent<HTMLSelectElement>) => {
setForm({...form, sign: event.target.value});
}
const onChangeSalePrice = (event: React.ChangeEvent<HTMLInputElement> | any) => {
setForm({...form, salePrice: event.target.value});
}
const onChangeManualSettlementAmount = (event: React.ChangeEvent<HTMLInputElement> | any) => {
setForm({...form, manualSettlementAmount: event.target.value });
}
const onBlurSettlementAmount = (event: React.ChangeEvent<HTMLInputElement> | any) => {
if (form.sign == '+') {
setForm({ ...form, settlementAmount: (Number(form.salePrice) + Number(form.manualSettlementAmount ))})
}
if (form.sign == '-') {
setForm({ ...form, settlementAmount: (Number(form.salePrice) - Number(form.manualSettlementAmount ))})
}
}
return (
<>
<select value={form.sign} onChange={onChangeSign}>
<option label="+" value={"+"}>+</option>
<option label="-" value={"-"}>-</option>
</select>
<input type="text" value={form.manualSettlementAmount} onChange={onChangeManualSettlementAmount} />
<input type="text" value={form.salePrice} onChange={onChangeSalePrice} />
<input type="number" disabled={true} value={form.settlementAmount} onBlur={onBlurSettlementAmount} />
</>
)
However, the value of settlementAmount in input continues to appear as an initial value of 0, and the arithmetic operation value is not displayed. I don't know why.
After inputting both sign and salePrice, whenever I input the manualSettlementAmount value, I want the settlementAmount value to be displayed as well.. How should I handle it?
Is it not possible to do arithmetic operations in onBlur?
Check out https://reactjs.org/docs/hooks-reference.html#usereducer or pass in a "functional update" to the setForm function call like:
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}