Tengo un problema con un componente de React. Tengo un modal que hace la division entre dos valores que pone el usuario (velocidad y distancia) para darnos el resultado "tiempo". Esta velocidad la puede poner en Km, Millas o Millas Náuticas según diga el usuario y la velocidad también puede estar en Km, Millas o Nudos.
EL problema que tengo es que la cuenta se hace cada vez que el usuario hace un cambio en uno de los input, pero no cuando este cambia de unidad de medida, lo que hace que si uno quiere comparar diferentes velocidad o distancias tenga que cambiar uno de los input. Dejo un pedazo del codigo aca:
const [unidadVelocidad, setUnidadVelocidad] = useState("kmh")
const [unidadDistancia, setUnidadDistancia] = useState("km")
const [velocidadFinal, setVelocidadFinal] = useState(0)
const [distanciaFinal, setDistanciaFinal] = useState(0)
function manipularVelocidad(event) {
event.preventDefault()
setUnidadVelocidad(event.target.value)
}
function manipularDistancia(event) {
event.preventDefault()
setUnidadDistancia(event.target.value)
}
function tomarVelocidad(event) {
event.preventDefault()
if (unidadVelocidad === "mph") {
setVelocidadFinal(event.target.value * 1.60934)
} else if (unidadVelocidad === "kts") {
setVelocidadFinal(event.target.value * 1.852)
} else {
setVelocidadFinal(event.target.value)
}
}
function tomarDistancia(event) {
event.preventDefault()
if (unidadDistancia === "mi") {
setDistanciaFinal(event.target.value * 1.60934)
} else if (unidadDistancia === "nm") {
setDistanciaFinal(event.target.value * 1.852)
} else {
setDistanciaFinal(event.target.value)
}
}
let tiempoDeVuelo
const resultadoHs = (distanciaFinal / velocidadFinal).toFixed(2)
const resultadoMins = (resultadoHs * 60).toFixed(2)
if (resultadoMins === "NaN" || resultadoHs === "NaN") {
tiempoDeVuelo = ""
} else {
tiempoDeVuelo = `${resultadoHs} HS (${resultadoMins} min)`
}
return (
<div className="modal-fondo-herramienta">
<div className="contenedor-herramientas">
<div className="modal-header-button">
<button onClick={toggleModal}>Cerrar</button>
</div>
<div>
<div className="prueba">
<form>
<p>Velocidad</p>
<input type='text' placeholder='Velocidad' onChange={tomarVelocidad} />
<button className={unidadVelocidad === "kmh" ? "botones-herramientas activo" : "botones-herramientas"} value="kmh" onClick={manipularVelocidad}>KM</button>
<button className={unidadVelocidad === "mph" ? "botones-herramientas activo" : "botones-herramientas"} value="mph" onClick={manipularVelocidad}>MI</button>
<button className={unidadVelocidad === "kts" ? "botones-herramientas activo" : "botones-herramientas"} value="kts" onClick={manipularVelocidad}>KT</button>
<p>Distancia</p>
<input type='text' placeholder='Distancia' onChange={tomarDistancia} />
<button className={unidadDistancia === "km" ? "botones-herramientas activo" : "botones-herramientas"} value="km" onClick={manipularDistancia}>KM</button>
<button className={unidadDistancia === "mi" ? "botones-herramientas activo" : "botones-herramientas"} value="mi" onClick={manipularDistancia}>MI</button>
<button className={unidadDistancia === "nm" ? "botones-herramientas activo" : "botones-herramientas"} value="nm" onClick={manipularDistancia}>NM</button>
</form>
</div>
<div>
Tiempo estimado de vuelo: {tiempoDeVuelo}
</div>
</div>
</div>
</div>
)
Mil gracias.