How to update one field according to another in react?-CodePudding

I have two input fields for an exchange interface. The goal is to update the other according to input (based on exchange rate). User can input in either one.

The problem: if users input 5 and get 500 in the other, then they remove two 0 from 500, it won't be able to get the state update and return 0.05 in the other.

To make it easier to visualize, i have it in codesandbox. Below is the code.

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>
  );
}

CodePudding user response：

The problem with your code is that your two inputs are both, at least to start with, uncontrolled inputs. And when I run your original codesandbox, there is a console message warning about this, when you edit either of the fields.

This comes about because although your inputs were taking their value from state, their change handlers were not updating that same state with the input value. You were updating the state of the other input, but not those themselves.

Adding the two highlighted lines below, one in each event handler, fixes this, and as far as I can tell makes things function as you intended:

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>
  ):
}

CodePudding user response：

  <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);
    }}
  />