Tengo dos campos de entrada para una interfaz de intercambio. El objetivo es actualizar el otro según la entrada (basado en el tipo de cambio). El usuario puede ingresar cualquiera de los dos.
El problema: si los usuarios ingresan 5 y obtienen 500 en el otro, luego eliminan dos 0 de 500, no podrá obtener la actualización de estado y devolver 0.05 en el otro.
Para que sea más fácil de visualizar, lo tengo encodesandbox . A continuación se muestra el código.
import "./styles.css"; import React from "react"; export default function App() { const rate = 100; const [token, setToken] = React.useState(); const [eth, setEth] = React.useState(); console.log("token", token); console.log("eth", eth); return ( <div className="App"> <h1>1 eth = 100 token</h1> <h2>goal: change one input, the other updates automatically</h2> <input placeholder="eth" value={eth} onChange={(e) => { let eth_input = e.target.value; console.log(eth_input); setToken(eth_input * rate); }} /> <input placeholder="token" value={token} onChange={(e) => { let token_input = e.target.value; console.log(token_input); setEth(token_input / rate); }} /> </div> ); } <input placeholder="eth" value={eth} onChange={(e) => { let eth_input = e.target.value; console.log(eth_input); setEth(eth_input) setToken(eth_input * rate); }} /> <input placeholder="token" value={token} onChange={(e) => { let token_input = e.target.value; console.log(token_input); setToken(token_input) setEth(token_input / rate); }} />El problema con su código es que sus dos entradas son, al menos para empezar, entradas no controladas . Y cuando ejecuto su codeandbox original, hay un mensaje de consola que advierte sobre esto, cuando edita cualquiera de los campos.
Esto ocurre porque aunque sus entradas tomaban su valor del estado, sus controladores de cambios no actualizaban ese mismo estado con el valor de entrada. Estaba actualizando el estado de la otra entrada, pero no los mismos.
Agregar las dos líneas resaltadas a continuación, una en cada controlador de eventos, soluciona esto y, por lo que puedo decir, hace que las cosas funcionen como pretendía:
import "./styles.css"; import React from "react"; export default function App() { const rate = 100; const [token, setToken] = React.useState(); const [eth, setEth] = React.useState(); console.log("token", token); console.log("eth", eth); return ( <div className="App"> <h1>1 eth = 100 token</h1> <h2>goal: change one input, the other updates automatically</h2> <input placeholder="eth" value={eth} onChange={(e) => { let eth_input = e.target.value; console.log(eth_input); setEth(eth_input); // <-- add this setToken(eth_input * rate); }} /> <input placeholder="token" value={token} onChange={(e) => { let token_input = e.target.value; console.log(token_input); setToken(token_input); // <-- and this setEth(token_input / rate); }} /> </div> ): }