Quiero mostrar (salePrice + manualSettlementAmount), (salePrice -manualSettlementAmount), valores según la operación de venta estado '+', '-'. Y estos valores de resultado se ponen en monto de liquidación.
Y los valores de la operación aritmética se calculan en 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} /> </> )Sin embargo, el valor de la cantidad de liquidación en la entrada sigue apareciendo como un valor inicial de 0 y no se muestra el valor de la operación aritmética. no sé por qué
Después de ingresar el signo y el precio de venta, siempre que ingrese el valor manualSettlementAmount, quiero que también se muestre el valor de liquidación. ¿Cómo debo manejarlo?
¿No es posible hacer operaciones aritméticas en onBlur?
Consulte https://reactjs.org/docs/hooks-reference.html#usereducer o pase una "actualización funcional" a la llamada a la función setForm como:
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> </> ); }