Quiero obtener los valores de unos input que se rellenan solos, serian: Subtotal, Impuesto y Total, que son generados por los calculos de cierto precio de un producto y su cantidad (ej: 1500 * 2 = 3000 que seria el subtotal y este valor se agrega a otro input automaticamente); sin embargo con useState solo puedo obtener el valor si yo digito los valores en cada input pero no si son generados automáticamente, ya que, al agregar la cantidad, el valor no se agrega en Cantidad al instante sino hasta que entro a otro input y agrego otro valor.
const initialState = {
cliente: "",
producto: "",
precio: "",
cantidad: "",
subtotal: "",
impuesto: "",
total: ""
};
const [dataFactura, setDataFactura] = useState(initialState);
const subtotal = dataFactura.precio * dataFactura.cantidad;
const impuesto = subtotal * 0.15;
const total = subtotal + impuesto;
const handleInputChange = (e) => {
setDataFactura( {
...dataFactura,
[e.target.name]: e.target.value,
});
console.log(dataFactura)
}
const handleSubmit = async (e) => {
e.preventDefault();
console.log(dataFactura)
}
<form onSubmit={handleSubmit}>
<div className="card">
<div className="card-body">
<div className="row mb-4">
<div className="d-flex col-6">
<label className="col-sm-2 col-form-label">Cliente:</label>
<div className="col-sm-10">
<input type="text" className="form-control" name="cliente" value={dataFactura.cliente} onChange={handleInputChange}/>
</div>
</div>
<div className="d-flex col-6">
<label className="col-sm-2 col-form-label">Fecha:</label>
<div className="col-sm-10">
<input type="text" readOnly className="form-control" value={fecha} onChange={handleInputChange}/>
</div>
</div>
</div>
<div className="row mb-4">
<div className="col-4">
<input type="text" className="form-control" name="producto" value={dataFactura.producto} onChange={handleInputChange}/>
</div>
<div className="col-3">
<input type="text" className="form-control" name="precio" value={dataFactura.precio} onChange={handleInputChange}/>
</div>
<div className="col-3">
<input type="text" className="form-control" name="cantidad" value={dataFactura.cantidad} onChange={handleInputChange}/>
</div>
<button
className="col-2 btn btn-primary"
>
Agregar
</button>
</div>
</div>
</div>
<div className="row mt-2">
<div className="col-7">
{/* <div className="card">
<div className="card-body">
<table className="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Producto</th>
<th scope="col">Precio</th>
<th scope="col">Cantidad</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Producto</td>
<td>Cantidad</td>
<td>Total</td>
</tr>
</tbody>
</table>
</div>
</div> */}
</div>
<div className="card col-5">
<div className="row mt-2">
<div className="d-flex">
<label className="col-sm-6 col-form-label">Sub total:</label>
<div className="col-sm-6">
<input type="text" className="form-control" value={subtotal} onChange={handleInputChange} name="subtotal"/>
</div>
</div>
</div>
<div className="row mt-2">
<div className="d-flex">
<label className="col-sm-6 col-form-label">Impuesto:</label>
<div className="col-sm-6">
<input type="text" className="form-control" value={impuesto} onChange={handleInputChange} name="impuesto"/>
</div>
</div>
</div>
<div className="row my-2">
<div className="d-flex">
<label className="col-sm-6 col-form-label">Total:</label>
<div className="col-sm-6">
<input type="text" className="form-control" value={total} onChange={handleInputChange} name="total"/>
</div>
</div>
</div>
<div className="row mt-4 mb-2">
<div className="d-flex">
<label className="col-sm-6 col-form-label"></label>
<div className="col-sm-6 d-grid gap-2 mx-auto">
<button className="btn btn-success">Pagar</button>
</div>
</div>
</div>
</div>
</div>
</form>