Как обновить поле ввода, когда другое поле ввода редактируется с помощью React useState

Question

Есть 3 числовых поля ввода: a, b и c.
Когда пользователь редактирует "a" или "b", тогда "c" следует вычислять как a * b.
Когда редактируется "c"затем посмотрите, какое поле было отредактировано совсем недавно:
если «a», то «b» = c / a
, если «b», то «a» = c / b

Следующий рабочий код позволяетредактировать a, b и c.
Я не могу понять, как реализовать вычисление a или b, если редактируется c.

import React, { useState } from 'react';

const Calc = () => {
  const [values, setValues] = useState( { a: 3, b: 2, c: 6 });
  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };
  return (
    <div>
      <div className="row">
        <label htmlFor="a">a</label>
        <input type="number" id="a" name="a" onChange={handleChange} value={values.a} />
      </div>

      <div className="row">
        <label htmlFor="b"> b </label>
        <input type="number" id="b" name="b" onChange={handleChange} value={values.b}  />
      </div>

      <div className="row">
        <label htmlFor="c"> c </label>
        <input type="number" id="c" name="c" onChange={handleChange} value={values.c}  />
      </div>

    </div>
  );
};

Чтобы сделать умножение для вычисления "c", я добавил в конецof handleChange ()

 if (name === 'a') {
      setValues({ ...values, a: value, c: value * values.b });
 }
 if (name === 'b') {
      setValues({ ...values, b: value, c: value * values.a });
 }

, но я не знаю, как вычислить «a» или «b» при редактировании «c», потому что мне нужно решить, какое поле «a» или «b» необходиморассчитывается на основе последнего события редактирования между этими 2.

Answer 1

Вместо того, чтобы писать условие вложения if else в одной функции, я бы предложил вам создать три разные функции и поддерживать обновление значений отдельно. Таким образом, обслуживание было бы легко в долгосрочной перспективе. Проверьте приведенную ниже логику -

import React, { useState } from 'react';

function App() {
  const [values, setValues] = useState( { a: 3, b: 2, c: 6 });
  const [lastChangedValue, setLastChangedValue] = useState("");

  const handleChangeA = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, a: value, c: value * values.b });
    setLastChangedValue(name);
  }
  const handleChangeB = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, b: value, c: value * values.a });
    setLastChangedValue(name);
  }
  const handleChangeC = (e) => {
    const { value } = e.target;
    if (lastChangedValue === 'a') {
      setValues({ ...values, c: value, b: value / values.a });
    }
    if (lastChangedValue === 'b') {
      setValues({ ...values, c: value, a: value / values.b });
    }
  }
  return (
    <div>
      <div className="row">
        <label htmlFor="a">a</label>
        <input type="number" id="a" name="a" onChange={handleChangeA} value={values.a} />
      </div>

      <div className="row">
        <label htmlFor="b"> b </label>
        <input type="number" id="b" name="b" onChange={handleChangeB} value={values.b}  />
      </div>

      <div className="row">
        <label htmlFor="c"> c </label>
        <input type="number" id="c" name="c" onChange={handleChangeC} value={values.c}  />
      </div>

    </div>
  );
}

export default App;

Answer 2

Вы должны создать внутреннее состояние для обработки field was edited most recently, например:

const [recentlyValue, setRecentlyValue] = useState("");
if (name === "a") {
    setRecentlyValue(name);
    setValues({ ...values, a: value, c: value * values.b });
}
if (name === "b") {
    setRecentlyValue(name);
    setValues({ ...values, b: value, c: value * values.a });
}
// check recentlyValue with case `c`
if (name === "c") {
    if (recentlyValue === "a") {
        // b = c/a
        setValues({ ...values, b: value / values.a, c: value });
    }
    if (recentlyValue === "b") {
        // a = c/b
        setValues({ ...values, a: value / values.b, c: value });
    }
    // Handle case not yet change a and b here, or don't do anything
}

My Demo